Question

当我添加带有＆＃34; n_block＆＃34; +（1-~）等ID的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

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

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

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

Answer 2

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

对于Eg：让我们假设这个脚本是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文档就绪事件

的内部/外部

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

2 个答案: