2013-11-12 4 views
0

Im завязывания добавить кнопку, когда ее щелкнул, и новая кнопка, чтобы предупредить кое-что, когда что нажата, но в данный момент его не предупреждая сообщение для того, когда новая кнопка нажатаJQuery не добавляя кнопки

Так что я делаю неправильно с этим.

вот что я до сих пор

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#first').bind('click', addbtn); 
     $('#second').on('click', alert); 

     function addbtn(){ 
      $('.box').html('<input type="submit" value="Click me" id="second" />'); 
     } 
     function alert(){ 
      alert("works"); 
     } 
    }); 
    </script> 
</head> 
<body> 
    <input type="submit" value="Click me" id="first" /> 
    <div class="box"></div> 
</body> 
</html> 
+3

Вы создаете элемент на лету и события не связаны с элементом, который будет добавлен в будущем в вашем случае, так что вы можете использовать делегирование событий .. '$ (« окно»). На ('click', '# second', alert); или привязать событие после добавления элемента. – PSL

+0

возможно дубликат [связывания событий на динамически создаваемые элементы?] (Http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – PSL

+1

Просто, чтобы добавить к комментарию @ PSL, используйте следующие формат в качестве приблизительного руководства: '$ (parent) .on (событие, элемент, обратный вызов);' – ninty9notout

ответ

2

В вашем примере вы привязки обработчика события «второй», прежде чем она существует. Поэтому нечего связывать.

Теперь, потому что вы используете JQuery 10+ живые события не работают, так что вы должны использовать на обработчик событий. Теперь обработчик события ON присоединяется к объекту и предоставляет опцию выбора. В этом случае вы хотите вызвать триггер и событие на клик для селектора # second. Если я потерял вас, подробности здесь. http://api.jquery.com/on/

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#first').bind('click', addbtn); 

     $('.box').on('click', '#second', function(){ 
      alert('works'); 
     }) 

     function addbtn(){ 
      $('.box').html('<input type="submit" value="Click me" id="second" />'); 
     } 

    }); 
    </script> 
</head> 
<body> 
    <input type="submit" value="Click me" id="first" /> 
    <div class="box"></div> 
</body> 
</html> 

Теперь другая проблема в том, вы определили функцию alert(), которая вызывает встроенную функцию alert(). Ну, как вы определили функцию, вы по существу переопределили функцию и привели к бесконечной рекурсии. Избегайте переопределения методов браузера, если вам не нужно.

Cheers.

+0

Спасибо большое, теперь отлично работает: D –

Смежные вопросы