AJAX不会在第一次点击时工作，需要点击两次

Question

update :

The problem now is after using firebug I found out that the first element gets the title attribute and other elements don't and after hovering on any link the title attribute of the first link disappears any ideas?

I have a which page opens when I click on a link like this:

<a class="pictures" href="#" onClick="MM_openBrWindow('content_image.php','images','menubar=yes,scrollbars=yes,resizable=yes,width=650,height=700')" title="Images"></a>

This page has images stored in a folder:

    $open = opendir($path);
while($images = readdir($open)){
    if ($images != "." && $images != "..") {
    $allimages[] = $images;
  } 
}
foreach($allimages as $val){
    ?>
     <div class="uploaded_image"><img src="../content_img/<?php echo $val; ?>" align='middle' width='150px' height='100px'>         
        <form><a href="#" title="<?php echo $val; ?>" class="del_img"><img src="images/delete.gif"/></a> <textarea name='text_area' rows=1 cols=20 >../content_img/<?php echo $val; ?></textarea> <input type='button' value='select path' onClick='javascript:this.form.text_area.focus();this.form.text_area.select();'> Copy path and paste in image path field </form></div>
        <?php
}
closedir($open);
?>         

I am trying to delete images using a regular link with href to the page with the following attributes:

?do=delete&img=<?php echo $val; ?>

and then unlink() the image. However, the image is deleted as soon as I hover on the link without clicking. I don't know why.

I tried to do it using AJAX:

$(document).ready(function(e) {
$("div.uploaded_image").on("click","a.del_img",function(e){
    e.preventDefault();
    var img = $(this).attr("title");
    var qst = "?img="+img+"&path=content_img";
    var ajax = false;
    ajax = new XMLHttpRequest();
    ajax.open("post","del_image.php"+qst);
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200){
        }
    }
    ajax.send(null);
    setTimeout(ref,1500);
});
});
function ref(){
window.location = "content_image.php"   
}

and this PHP code work uses AJAX to delete:

$img = $_REQUEST['img'];
$path = $_REQUEST['path'];
unlink("../".$path."/".$img);

When I click on the delete link for the first time it doesn't work. I have to click again to delete the image. Any help please?

Answer 1

 $open = opendir($path);
while($images = readdir($open)){
    if ($images != "." && $images != "..") {
    $allimages[] = $images;
  } 
}
foreach($allimages as $val){
    ?>
     <div class="uploaded_image"><img src="../content_img/<?php echo $val; ?>" align='middle' width='150px' height='100px'>         
        <form><a href="Javascript:void(0);" title="<?php echo $val; ?>" class="del_img"><img src="images/delete.gif"/></a> <textarea name='text_area' rows=1 cols=20 >../content_img/<?php echo $val; ?></textarea> <input type='button' value='select path' onClick='javascript:this.form.text_area.focus();this.form.text_area.select();'> Copy path and paste in image path field </form></div>
        <?php
}
closedir($open);
?>         

replace code with this code