jQuery将数据绑定到动态创建的对象的单击事件

jquery bind data to click event for object created dynamically

本文关键字：对象 单击 事件 创建 动态 数据绑定 jQuery      更新时间：2023-09-26

>下面的脚本动态创建按钮和事件。我想将数据绑定到点击事件。但是 bind（） 函数失败了，点击事件就是不会触发。无论如何，如果我使用 on（） 函数，请单击事件成功触发。

http://jsfiddle.net/hzLv1r6s/2/

    function showMessage(evt) {
        alert(evt.data.message);
    }
$(document).ready(function () {
    var activeDiv;
    var pVar = { message:'Hello from a paragraph'};
    $("a").on("click", function () {
        if (activeDiv === $(this).attr('id')) {
            $('#__div').hide('slow');
            activeDiv = '';
            return;
        }
        $('.box1').empty();
        var guts = 
            '<div id="__div" style="display:none;">' +
            '<input type="text" id="__text" value="' + $(this).attr('data-content') + '"/><br>' +
            '<button id="__internal" value="aaa">Submit</button>' +
        '</div>';
        //this one doesn't work on click event
        $('#__internal').bind('click',pVar,showMessage);
        $($.trim(guts)).appendTo('.box1');
        $('#__div').show('slow');
        activeDiv = ($(this).attr('id'));
    });
    /*
    //this one does work on click event
    $('.box1').on('click','#__internal',function(event){
       //alert(event.target.value);
        alert($('#__text').val());
    });
    */
});

您需要在此上下文中使用event delegation，

 $('.box1').on('click','#__internal' , showMessage);

或者在将 html 字符串附加到 DOM 后尝试将事件绑定到它。

 $($.trim(guts)).appendTo('.box1');
 $('#__internal').bind('click',pVar,showMessage);

注意：但我不知道你为什么拒绝在这里使用事件委托。

在没有事件委托的情况下创建的演示。

相关文章：