用于动态内容的onClick函数无法正常工作

Question

当我添加ID为“ n_block” +（1-〜）的div时，我遇到了onclick函数的问题。 当我在对象上使用jquery缩放功能使它们变小或变大时，onClick不再起作用。 我不太擅长编程，因此代码可能会造成混淆。

这是我用于项目onClick的代码：

$(document).on("click",function (e, ui){
    //When the document gets clicked, check if one of the items was clicked.
    if($(e.target).is($("#n_block" + cloneCount1)) || $(e.target).is($("#n_block" + cloneCount1+ " span"))){
        //Set current item.
        var item = $("#n_block" + cloneCount1);
        //Set style to current item.
        item.css("border-color", "Black");
        item.css("border-width","2px");
        item.css("background-color", "floralwhite");
        jsPlumb.repaintEverything();  

        //Check if key Delete was pressed while item selected & delete that item with his children.
        $('html').keydown(function(e){
            if(item.css("border-width")=="2px"){  
                if(e.keyCode == 46) {
                    /* Prevents line bugging*/
                    jsPlumb.detachEveryConnection();
                    jsPlumb.deleteEveryEndpoint();
                    var razred = getClass(item, "b_"),
                        id = item.prop("id");

                    item.remove();

                    if(razred == "b_2"){
                        $(".ovoj."+id).remove();
                    }
                    else if (razred == "b_4"){
                        $(".ovojLoop."+id).remove();
                        $(".empty_block_c."+id).remove();
                    }

                    if ( $('.objects').find('div').length == 2) {
                        $(".objects").empty();
                        $(".objects").append('<div class="b_s" id="start_block">START</div><p id="start_text">Insert symbols here!</p><div class="b_s" id="end_block">STOP</div> ');
                    }else{
                        /* Connects objects together with line. ****/
                        povezi(cloneCount, tip_crte, ".objects");
                    }

                }
                jsPlumb.repaintEverything();   
            }
        });
    }
    // If item is not clicked set this css to the current item. 
    else{
        $("#n_block" + cloneCount1).css("border-width","1px");
        jsPlumb.repaintEverything();
    }

});

这是单击按钮时用于放大的缩放代码：

var currentZoom = 1.0;
$(".zoomin").click(function (){
    //Detaches the connections from item to item.
    jsPlumb.detachEveryConnection();
    jsPlumb.deleteEveryEndpoint();
    //Prevents spamming of button, animates the objects 
    $(".project").stop().animate({ "zoom": currentZoom += .1}, "slow", function() {
        if(!$(".objects").children().is($("p"))){
            povezi(cloneCount, tip_crte, ".objects");
        }
    });
});

Answer 1

使用事件委托将事件绑定到动态添加的元素。

$(document).on('click', ".zoomin", function (){
    //Your code.
});

当您使用常规的.click()将事件绑定到元素时，该事件甚至仅绑定到执行代码时DOM中存在的那些元素。 使用事件委托，您可以告诉jQuery我们需要将处理程序添加到特定元素内的每个'.zoomin'元素，无论何时添加。

Answer 2

解决方案取决于何时执行尝试绑定事件的脚本。

例如：假设此脚本在jquery的文档就绪功能中

$(document).ready(function(){
    $(".zoomin").click(function (){
       //your logic here
     });
 });

当页面HTML完成加载到浏览器中时，将在此处执行此脚本。 现在，当脚本执行时，它将尝试使用zoomin类查找元素，如果找到，它将为该元素添加一个事件并继续。 如果找不到该元素，则脚本继续前进。 因此，我们实际上应该注意何时执行脚本，并且该脚本是在特定时间可用的预期元素。 如果该元素在HTML中尚不可用（该元素以后可能会使用jquery动态添加），我们有2个选项可将事件绑定到该元素。

1）在将元素添加到HTML中时执行脚本：假设我有一个事件，该事件弹出带有一些图像的弹出窗口。 现在，我要放大和缩小图像。 由于弹出窗口中的图像是动态添加的，并且我可以控制何时添加图像，因此可以执行此操作。

$(document).ready(function(){
   $('.ViewImage').on('click',function(){
       // some code is executed which brings up the popup 
       // now we know that the image is added into html we can now run the script
    $(".zoomin").click(function (){
       //your logic here
     });
   });
});

2）当元素添加到HTML中时我们没有线索/控件，但仍想将事件绑定到它：在这种情况下，我们无法控制何时添加元素，或者不确定从（）添加元素的位置。可能来自所使用的某些外部插件等）或完全无法控制所添加的元素。 那就是当我们使用@Rejith R Krishnan建议的语法时

$(document).on('click', ".zoomin", function (){
  //Your code.
});

这将对执行脚本时HTML中的所有元素以及将来使用类名zoomin添加的元素起作用。 因此，可以将此脚本放置在jquery文档ready事件的内部/外部