Событие JQuery не работает, когда кнопка создается с помощью jquery

Question

Есть ли способ, с помощью которого я мог бы связывать события из вновь созданных элементов с помощью jquery.

Heres пример.

HTML:

<div id="meta_inner" class="gallery"> 
    <div id="medias"> 
     <label for="test_meta_boxes1" ><input id="test_meta_boxes1" type="text" size="100" name="ad_image" value="http://" /><input id="test_meta_boxes_button" class="button" type="button" value="Upload Image" data-int="test_meta_boxes1"/></label> 
    </div> 
    <input class="button tagadd add" type="button" value="Add Image Field"> 
</div> 

JQuery

jQuery(document).ready(function($){ 
    var count = $("#medias").children('label').length; 
    $(".tagadd").on('click', function() { 
     count = count + 1; 

     $('#medias').append('<label for="test_meta_boxes'+count+'" ><input id="test_meta_boxes'+count+'" type="text" size="100" name="ad_image" value="http://" /><input id="test_meta_boxes_button" class="button" type="button" value="Upload Image" data-int="test_meta_boxes'+count+'"/></label>'); 

     return false; 
    }); 

    $('label').find('#test_meta_boxes_button').on('click', function(e) { 

     metabox = $(this).data('int'); 

     console.log(metabox); 

    }); 
}); 

При выполнении этого. Первый ярлык будет работать и печатать в окне консоли при нажатии кнопки «Загрузить изображение».

но когда я добавляю другую метку, нажав кнопку «Добавить поле изображения». кнопка «Загрузить изображение» не будет работать.

Я что-то не хватает? любая помощь приветствуется.

Answer 1

Если, а не просто Добавляя HTML, вы добавляете некоторые из них, а затем вставьте пуговицу в качестве нового объекта JQuery, это, кажется, работает.

$(".tagadd").click(function() { 
    count++; 
    $('#medias').append('<label for="test_meta_boxes' + count + '" ><input id="test_meta_boxes' + count + '" type="text" size="100" name="ad_image" value="http://" /></label>'); 
    $('#test_meta_boxes' + count).after(
     $("<input />") 
      .attr('id', "test_meta_boxes_button" + count) 
      .attr('type', 'button') 
      .attr('value', 'Upload Image') 
      .attr('data-int', 'test_meta_boxes' + count) 
      .addClass('button') 
      .click(function (e) { 
       metabox = $(this).data('int'); 
       console.log(metabox); 
      }) 
    ); 
    return false; 
}); 

Here является рабочей скрипкой.

Это потому, что ваш метод .on() в настоящее время нацелен на идентификатор, если вы должны связать метод в соответствии с документацией (см. Ниже), он должен работать должным образом.

var count = $("#medias").children('label').length; 
$(".tagadd").click(function() { 
    count++; 
    $('#medias').append('<label for="test_meta_boxes' + count + '" ><input id="test_meta_boxes' + count + '" type="text" size="100" name="ad_image" value="http://" /></label>'); 
    $('#test_meta_boxes' + count).after(
     $("<input />") 
      .attr({ 
       type: 'button', 
       value: 'Upload Image', 
       'data-int': 'test_meta_boxes' + count 
      }) 
      .addClass('button test_meta_boxes_button') 
    ); 
    return false; 
}); 

$(document).on('click', 'label .test_meta_boxes_button', function(e) { 
    metabox = $(this).data('int'); 
    console.log(metabox); 
}); 

Пожалуйста, обратите внимание, что вы в настоящее время назначая тот же идентификатор для каждой кнопки, которая создается, это плохая практика, и поэтому вы должны включать в свой отсчет переменной в идентификатору кнопки, и класс целевых все кнопки.

С дублированный идентификатор проблемы удаленного и класс в это место, как указано выше, и пересмотренный .on() метод все работает, см скрипку here

Answer 2

Вы связываете события привязки только с label #test_meta_boxes_button элементами, которые существуют, когда document.ready случается.

[EDIT]

вместо

$('label').find('#test_meta_boxes_button').on('click', function(e) { 
    metabox = $(this).data('int'); 
    console.log(metabox); 
}); 

попробовать сделать

$(document).on('click', 'label .test_meta_boxes_button', function(e) { 
    metabox = $(this).data('int'); 
    console.log(metabox); 
}); 

чек документацию JQuery для .onhttp://api.jquery.com/on/ в

Пожалуйста, обратите внимание на .test_meta_boxes_button, а также. вы не должны иметь несколько элементов на странице с одним и тем же идентификатором.

изменение <input id="test_meta_boxes_button" class="button" type="button" ... в <input class="button test_meta_boxes_button" type="button"...

Answer 3

Вы не добавляя on click событие вновь созданного элемента. После создания нового элемента вам необходимо повторно применить событие on click, так что он активен и в этом новом элементе.

Так поясню:

function ReapplyOnClickEvents() 
{ 
     //Your on click events go here 
     $(selector).on('click', function(){ /*do whatever*/}); 
} 

... //JS that makes a new button (pseudocode): 
$(whatever).AddButton(function(){ 
    //This is callback after add button is run: 
    ReapplyOnClickEvents(); 
}