Click Event внутри плагина jQuery на другом элементе не работает

Question

Я нашел много статей по этой теме в stackoverflow, но никто не дал мне решение по моей точной проблеме.

У меня есть плагин jQuery, который отлично работает до сих пор. В этом плагине добавляю несколько новых DIVs. Также я хочу добавить прослушиватель событий нажатия на эти новые DIVs. Как это:

(function ($) { 
    $.fn.myFunc = function(options) { 

    // Options + Defaults 
    var settings = $.extend({ 
     // Some options in here 
    }, options); 

    var controls = "\ 
     <div class='controls'>\ 
     <button class='btn-add-text'>Add Text</button>\ 
     </div>\ 
    "; 

    $('.btn-add-text').click(function() { 
     alert("Test"); 
    }); 

    $(this).after(controls); 

    return this; 
    }; 
})(jQuery); 

Моя первая мысль была, что это невозможно, потому что слушатель событий был вызван перед новым ДИВ на самом деле внутри DOM, поэтому он не может работать. Таким образом, я переместил .click (FUNC ... Блок вне кода плагина и поместить его внутри document.ready функции следующим образом:

$(document).ready(function() { 
    $('.btn-add-text').click(function() { 
    alert("Test"); 
    }); 
}); 

Это также не будет работать для меня Есть ли решение. для этой проблемы?

Answer 1

Попробуйте использовать несколько переменных для хранения HTML элементов (Jquery).

(function ($) { 
    $.fn.myFunc = function(options) { 

    // Options + Defaults 
    var settings = $.extend({ 
     // Some options in here 
    }, options); 

    var button = $('<button class="btn-add-text">Add Text</button>'); 

    button.click(function() { 
     alert("Test"); 
    }); 

    var controls = $('<div class="controls"></div>') 
        .append(button); 

    $(this).after(controls); 

    return this; 
    }; 
})(jQuery); 

вы используете $('.btn-add-text').click(...), а затем добавить этот элемент в HTML с $(this).after(controls). Так JQuery селектор функции не могут найти этот элемент в html, потому что его здесь нет.

Кроме того, ваша концепция неверна, потому что вы добавляете прослушиватель событий на все элементы .btn-add-text каждый раз, когда вы вызываете myFunc, который может перегружать клиентский javascript. Добавить прослушиватели событий только к тем элементам, которые вы сейчас создаете.

Answer 2

Чтобы заставить его работать над новым DIVs вы должны сделать что-то вроде -

$('.controls .btn-add-text').click(function() { 
     alert("Test"); 
    }); 

Если он не работает, то попробуйте отключить кэш и обновить.

Edit:

Оверлукед что-то. Фактически вы просто регистрируете внутреннюю функцию (с параметром «options»). Вам нужно запустить его, чтобы добавить фактический элемент div.

Ваша внешняя функция работает, потому что она заключена в(), но внутренняя - нет.