15

我正在制作一个项目，其中当用户单击按钮时动态插入带有按钮的整个 div，并且在该 div 中有一个按钮，当用户单击它时，它会执行其他操作，例如提醒某些内容。

问题是当我在动态添加的 div 中按下该按钮时，什么也没有发生。该事件根本不会触发。

我尝试在 HTML 中添加该 div 并再次尝试，该事件有效。所以我想这是因为 div 是动态添加的。

添加的 div 有一个 class mainTaskWrapper，而 button 有一个 class checkButton。该活动附在下面文件.on()的末尾。script.js

这是我的代码：

helper_main_task.js ：（这是添加 div 的对象，您不必阅读它，因为我认为这都是关于动态添加该 div 的，但我会在需要时将其放入）

var MainUtil = {
    tasksArr : [],
    catArr : ["all"],
    add : function(){       

        var MTLabel = $("#mainTaskInput").val(),  //task label  
            MTCategory = $("#mainCatInput").val(), //task category 
            MTPriority = $("#prioritySlider").slider("value"),  //task priority     
            MTContents = $('<div class="wholeTask">\
                                <div class="mainTaskWrapper clearfix">\
                                    <div class="mainMarker"></div>\
                                    <label class="mainTaskLabel"></label>\
                                    <div class="holder"></div>\
                                    <div class="subTrigger"></div>\
                                    <div class="checkButton"></div>\
                                    <div class="optTrigger"></div>\
                                    <div class="addSubButton"></div>\
                                    <div class="mainOptions">\
                                        <ul>\
                                            <li id="mainInfo">Details</li>\
                                            <li id="mainEdit">Edit</li>\
                                            <li id="mainDelete">Delete</li>\
                                        </ul>\
                                    </div>\
                                </div>\
                            </div>');


        this.tasksArr.push(MTLabel);

        //setting label
        MTContents.find(".mainTaskLabel").text(MTLabel);        

        //setting category  
        if(MTCategory == ""){
            MTCategory = "uncategorized";
        }
        MTContents.attr('data-cat', MTCategory);
        if(this.catArr.indexOf(MTCategory) == -1){
            this.catArr.push(MTCategory);
            $("#categories ul").append("<li>" + MTCategory +"</li>");
        }
        $("#mainCatInput").autocomplete("option", "source",this.catArr);

        //setting priority marker color
        if(MTPriority == 2){ 
            MTContents.find(".mainMarker").css("background-color", "red");
        } else if(MTPriority == 1){
            MTContents.find(".mainMarker").css("background-color", "black");
        } else if(MTPriority == 0){
            MTContents.find(".mainMarker").css("background-color", "blue");
        }       

        MTContents.hide();
        $("#tasksWrapper").prepend(MTContents); 
        MTContents.slideDown(100);

        $("#tasksWrapper").sortable({
            axis: "y",
            scroll: "true",
            scrollSpeed : 10,
            scrollSensitivity: 10,
            handle: $(".holder")            
        });

    }
};

script.js ：（ .on() 函数位于底部的文件）

$(function(){
     $("#addMain, #mainCatInput").on('click keypress', function(evt){       
        if(evt.type == "click" || evt.type =="keypress"){
            if((evt.type =="click" && evt.target.id == "addMain") ||
                (evt.which == 13 && evt.target.id=="mainCatInput")){    
                    MainUtil.add();                                             
            }
        }
    });

    //Here's the event i'm talking about :
    $("div.mainTaskWrapper").on('click', '.checkButton' , function(){
        alert("test text");
    });
});
4

3 回答 3

33

它看起来不div.mainTaskWrapper存在。

从文档中（是的，它实际上是粗体）：

事件处理程序仅绑定到当前选定的元素；当您的代码调用.on(). 为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。

[...]

通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

您可能希望将其绑定到#tasksWrapper：

$("#tasksWrapper").on('click', '.checkButton' , function(){
    alert("test text");
});
于 2012-08-30T23:33:22.840 回答
3

您需要使用on（作为参数）指定一个选择器，以使其表现得像旧delegate方法一样。如果您不这样做，则该事件将仅链接到当前匹配的元素 div.mainTaskWrapper（尚不存在）。您需要在添加新元素后重新分配事件，或者将事件添加到已经存在的元素，例如#tasksWrapper文档本身。

请参阅本页上的“直接和委托事件” 。

于 2012-08-30T23:38:02.687 回答
3

我知道这是一篇旧帖子，但可能对遇到的其他人有用......

你可以试试：

jQuery('body')on.('DOMNodeInserted', '#yourdynamicallyaddeddiv', function () {
//Your button click event
});

这是一个简单的例子 - https://jsfiddle.net/8b0e2auu/

于 2015-10-07T16:06:30.257 回答