HTML() и нажмите кнопку обработчик

Question

Первоначально я получил этот код и все работает хорошо:

<div class="rm"> 
     <button id="sub" type="submit"> 
      <span>Registo</span> 
     </button> 
    </div> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     $(".rm>#sub").click(function(event) { 
      event.preventDefault(); 
      var formdata = $("#custom").serialize(); 
      $.ajax({ 
       url: "dojo/insert.php", 
       type: "post", 
       dataType: "json", 
       data: formdata, 
       success: function(data) { 
        switch (data.livre) { 

        case 'error': 
         $(".rm").html('<button id="sub" type="submit"><span>Rever</span></button>'); 
         break;      

        default: 
         $('#paginas').delay(50).load('profile_empresa_3.php');   
         break; 
        } 
       } 
      }); 
      return false;    
     }); 
    }); 
    </script> 

Проблема теперь. Когда я добавляю $(".rm").html("") с кнопкой с тем же идентификатором. Если я нажму на эту новую кнопку, страница перезагрузится. Мой вопрос. Если добавленная кнопка имеет тот же идентификатор, почему обработчик клика не повторяется?

благодаря

Answer 1

В то время вы связать обработчик события $(".rm > #sub"), новый элемент еще не существует, поэтому JQuery не может связать обработчик к нему.

Вы можете либо привязать обработчик события, или привязать его к $('.rm') вместо этого и использовать делегирование событий (с использованием .on()):

$('.rm').on('click', '#sub', function() { // or use button instead of #sub 
    //... 
}); 

Но вместо того, чтобы заменить весь элемент, кажется, вы могли бы просто изменить его текст содержание:

$('#sub span').text('Rever'); 
// or 
$('.rm button span').text('Rever'); 

---

отметить также, что идентификаторы должны быть уникальными, имеющими два элемента в DOM с тем же идентификатором является инвалид.

Answer 2

Использование JQuery-х .on() вместо .click() - http://api.jquery.com/on/

Answer 3

идентификатор должен быть уникальным в пределах страницы.

Чтобы добавить такое же действие для всех новых динамически создаваемых кнопок, что вам нужно сделать что-то вроде:

$(".rm > .sub").live("click",function(event) { 
....  

Но не используя тот же идентификатор, использовать класс вместо как я уже выше.

Answer 4

Функция click будет пересекать DOM и привязать событие ко всем существующим элементам в этот момент времени. Вы создаете новый элемент DOM позже, который не связан.

Чтобы сделать это так, как вы хотите, см. Документацию jQuery для функции live().

В результате изменения будут выглядеть следующим образом:

$('#sub').live('click', function(event) { 
    //your implementation 
}); 

Answer 5

Это происходит потому, что события связаны с уникальным объектом DOM независимо от id, когда вы удаляете начальную кнопку и заменяете ее одним и тем же идентификатором, событие, связанное с кнопкой, исчезло.

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

Ваш код будет:

var btnEvent = function(e) { 
    e.preventDefault(); 
    var formdata = $("#custom").serialize(); 
    $.ajax({ 
     url: "dojo/insert.php", 
     type: "post", 
     dataType: "json", 
     data: formdata, 
     success: function(data) { 
      switch (data.livre) { 

      case 'error': { 
       $(".rm").html('<button id="sub" type="submit" onclick="return btnEvent(event)"><span>Rever</span></button>'); 

      } break;      

      default: 
       $('#paginas').delay(50).load('profile_empresa_3.php');   
       break; 
      } 
     } 
    }); 
return false;    
}; 
$(document).ready(function() { 
    $(".rm>#sub").click(btnEvent); 
});