动态元素上的 onclick 事件不起作用答案

【问题标题】：onclick event on dynamic element not working动态元素上的 onclick 事件不起作用
【发布时间】：2017-02-13 22:32:49
【问题描述】：

我正在尝试将事件侦听器附加到静态元素，以允许对我的动态图像进行 onclicks 工作。我似乎一辈子都无法做到这一点。我在其他帖子中反复搜索并复制了答案，但无济于事。

我不确定我做错了什么，无论是我的代码中的错误还是我只是错过了一些东西。

任何帮助将不胜感激，以下是我的代码：

$(document).on('click','.newsfeed-bump',function(bump_hype_product){
jQuery('#product-message-confirmation-wrap').hide();
jQuery('.popup-waiting-wrap').show();
jQuery('#modal_product_message_confirmation h4.modal-title').html('');

jQuery.ajax({
    url : the_ajax_script.ajaxurl,
    type : 'post',
    data : {
        action : 'bump_hype_product',
        type : type_text,
        post_id : post_id
    },
    success : function( response ) {

        jQuery('.popup-waiting-wrap').hide();
        jQuery('#product-message-confirmation-wrap').show();
        jQuery('#product-message-confirmation-wrap').html(response);

        jQuery('#modal_product_message_confirmation').modal('show');
    }
});
                        });

我收到“未捕获的 ReferenceError：未定义 type_text”

【问题讨论】：

所以你有一个带有id="document"的元素？
$('#document') 表示您正在寻找 ID 为 document 的元素，真的吗？！我猜$(document) 会更好......
你能展示一个 JSfiddle 的例子吗？
你有id="document"的元素吗？
@SunnySoni 最好使用$(document)，因为至少可以在body 可用之前设置它之前，意思是在head 部分设置

标签： javascript jquery dynamic onclick event-listener

【解决方案1】：

请试试这个：

$('#document').on('click','.newsfeed-bump',bump_hype_product,function(){
   // your logic
}

【讨论】：

希望 '#document' 是元素的 id，但如果您指的是 javascript 文档对象，请改用：$(document)
@Ryan 第三个参数是您传递给事件处理程序的数据。由于某种原因，您不能直接在事件处理程序括号内传递数据。希望这会有所帮助
@Samir，请解释一下

【解决方案2】：

使用这个

$("body").delegate(".newsfeed-bump", "click", function(){
    //your code
});

或

$("body").on("click", ".newsfeed-bump" function(){
    //your code
});

【讨论】：