Блог

когда вы нажимаете на мою ссылку #addScnt, появляется новый дочерний элемент. Пока все работает нормально, но я добавляю другой тег, и когда вы нажимаете на него, должно что-то произойти, но, как вы можете догадаться, ничего не происходит…но когда я создаю другую ссылку внутри своей страницы (то есть вне моей функции jquery), моя функция щелчка работает… Так что я не понимаю, что там происходит.

 $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size()   1;

    $('#addScnt').click(function() {
        $('<p><label for="p_scnts"><input type="file" id="p_scnt" name="p_scnt_'   i  '"></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i  ;
        return false;
    });

    $('#remScnt').click(function() {
        alert();
    });

});
  

мой html

  <h2><a href="#" id="addScnt">Ajoutez une nouvelle photo</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="file" id="p_scnt" name="p_scnt">
        </label>
    </p>
</div>
  

Итак, $(‘#remScnt’).click(function() вообще не работает, когда я добавляю другого дочернего элемента … но если я буквально добавлю тег с идентификатором #remScnt на свою страницу, мое предупреждение сработает…

Здесь происходят две вещи…

Во-первых, похоже, что вы повторно используете id значения. Если вы добавляете это несколько раз на страницу:

 <a href="#" id="remScnt">Remove</a>
  

Тогда у вас есть несколько одинаковых элементов id , что недопустимо. Таким образом, поведение таких вещей, как jQuery selectors ( $('#remScnt') ) , не определено. (Они могут случайно работать, но они по-прежнему недействительны и не определены.) Вместо этого попробуйте использовать классы вместо:

 <a href="#" class="remScnt">Remove</a>
  

и:

 $('.remScnt')
  

Во-вторых, привязка щелчка здесь происходит только один раз при загрузке страницы:

 $('.remScnt').click(function() {
    // etc.
});
  

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

Вы можете обойти это, делегировав обработчик событий общему родительскому элементу и отфильтровав события на основе селектора. jQuery предоставляет .on() функцию для этого:

 $(document).on('click', '.remScnt', function() {
    // etc.
});
  

То, что это делает, на самом деле привязывается к событию щелчка всего документа и реагирует на это событие каждый раз, когда что-то, соответствующее предоставленному селектору, вызывает такое событие. Проще говоря, в этой версии '.remScnt' селектор вычисляется при возникновении события щелчка, а не при определении обработчика события.

Вам не нужно использовать document для удержания события, подойдет любой общий родительский элемент. До тех пор, пока этот родительский элемент не будет динамически добавлен / удален, как целевые элементы. Например, если все целевые a class="remScnt" элементы будут одинаковыми div , вы можете div настроить их вместо этого:

 $('#someParentDiv').on('click', '.remScnt', function() {
    // etc.
});
  

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

 $('#p_scents').on('click', '#remScnt', function() {
    alert();
});
  

Когда вы добавляете элемент, который вам нужно использовать .on вот так,

 $('#p_scents').on('click', '#remScnt', function(){
    // Some Stuff
});