Функция onClick, используемая для динамического содержимого, не работает должным образом

Question

Я столкнулся с проблемой с функцией onclick, когда добавляю div с идентификаторами типа «n_block» + (1- ~). Когда я использую функцию масштабирования jquery на объектах, чтобы сделать их меньше или больше, onClick больше не работает. Я не очень хорошо программирую, поэтому код может быть путаным.

Heres код я использую для 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(); 
    } 

}); 

И Heres код масштабирования для масштабирования при нажатии кнопки:

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 Кришнан

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

Это будет работать на всех элементах, которые находятся в HTML во время выполнения сценария и на элементах, которые будут добавлены в будущее с именем класса zoomin. Таким образом, этот скрипт может быть размещен внутри/снаружи события jquery document ready