这是关于Jquery/JS的,如果我改变元素's HTML-我可以对它执行其他Jquery/JS操作吗

this is regarding Jquery/JS, if i change element's HTML - will i be able to perform other Jquery/JS action on it

本文关键字:Jquery JS 我可以 HTML- 操作 执行 其他 元素 如果 改变      更新时间:2024-05-13

我有一个脚本,点击执行ajax调用时连接到数据库get-imagename,并在&lt-img->使用正确的路径,它还会在后面添加一个隐藏的复选框,然后回显它。

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

主要目标是能够点击图像,就好像它是一个复选框一样(这部分已经为我排序了),但无论我尝试什么,我都无法让点击功能发挥作用。。

这是代码。

这是对图像进行回声处理的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;
 });

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

提前感谢。

当您替换元素的html时,它内部的所有元素都会被移除并消失。这意味着附加到它们的事件处理程序也将被删除。

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

$(document).on( "click", "#yaniv", function() {
    alert("kahdaskjdj");
});
$('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);
});

由于元素是使用ajax动态插入DOM的,因此在绑定单击处理程序时,必须将事件委托给实际存在的父元素,在本例中,该父元素看起来是#ImgGalleryID

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