Question

我有一个脚本，点击后执行ajax调用连接数据库获取imagename并在＆lt;中设置图像名称-img - ＆gt;使用正确的路径，它会在它之后添加一个隐藏的复选框，然后回显它。

然后我返回返回的ajax消息并将其作为div的HTML。我的问题是，我能够对插入的内容进行更多操作..

主要目标是能够点击图像，好像它是一个复选框（这部分已经为我排序）但是无论我尝试什么，我都无法使用.click功能..

这是代码。

这是回声图像的PHP部分。

if($_POST['updateIgallery'] == 'ajax'){
    global $wpdb;
    $table_name= $wpdb->prefix . "table_T";
    $imagecounter = 1;
    $toecho = '';
    $currentselected = $wpdb->get_row("query");
    preg_match_all('/\/(.+?\..+?)\//',$currentselected ['image_gal'],$preresualts); // images are stored with /image/.
    foreach ($preresualts[1] as $imagename){
        $toecho .= '
        <img rel="no" id="JustantestID" class="JustaTestClass" src="'.site_url().'/wp-content/plugins/wp-ecommerce-extender/images/uploads/'.$imagename.'">
        <input name="DoorIMGtoDeleteIDcheck'.$imagecounter.'" style="display:none;" name="DoorIMGtoDelete['.$imagecounter.']" value="/'.$imagename.'/" type="checkbox">
        ';
        $imagecounter++;
    }
    echo $toecho;
}

这是发送和接收HTML并将其插入div的ajax部分：

$.ajax({
        type: "POST",
        url: "/wp-content/plugins/wp-ecommerce-extender/DB_Functions.php",
        data: { updateIgallery: "ajax", CurrentDoorIDnum: $('#dooridforgallery').val()}
        }).success(function(insertID) {
                $("#ImgGalleryID").html(insertID);
            });

到目前为止，我遇到的问题是：

$("#JustantestID").click(function() {
//DoorImageGallery($(this).attr('id')); // the function i will use if the alert actually works
    alert("kahdaskjdj");
    return true;
 });

我希望问题和代码是可以理解的。

先谢谢了。

Answer 1

当你替换元素的html时，它里面的所有元素都被删除了。这意味着附加到它们的事件处理程序也会被删除。

您可以尝试将事件处理程序附加到页面上静态且永久的更高级别元素。如果没有更多信息，我将使用document：

$(document).on( "click", "#yaniv", function() {
    alert("kahdaskjdj");
});

Answer 2

$('img.JustaTestClass').bind('click', function() {
  var checkbox = $(this).siblings('input[type=checkbox]');
  if (!checkbox.is(':checked')) checkbox.attr('checked', true);
  else checkbox.attr('checked', false);
});

Answer 3

由于元素是使用ajax动态插入DOM的，因此必须将事件委托给绑定click处理程序时实际存在的父元素，在这种情况下看起来是#ImgGalleryID

$('#ImgGalleryID').on('click', '#yaniv', function() {
    DoorImageGallery(this.id);
    alert("kahdaskjdj");
});

这是关于Jquery / JS，如果我改变元素的HTML - 我将能够对它执行其他Jquery / JS操作

3 个答案: