JQuery не добавляет кнопку

0

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

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

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

<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
    Вы создаете элемент на лету, и событие не привязано к элементу, который будет добавлен в будущем в вашем случае, поэтому вы можете использовать делегирование события .. $('.box').on('click','#second', alert); или связать событие после добавления элемента.
  • 0
    возможный дубликат привязки событий к динамически создаваемым элементам?
Показать ещё 1 комментарий
Теги:

1 ответ

2
Лучший ответ

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

Теперь, поскольку вы используете jquery 10+, живые события не работают, поэтому вы должны использовать обработчик событий on. Теперь обработчик события 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(). Ну, как вы определили функцию, вы по существу переопределили функцию и привели к бесконечной рекурсии. Избегайте переопределения методов браузера, если вам не нужно.

Приветствия.

  • 0
    Большое спасибо, теперь работает отлично: D

Ещё вопросы

Сообщество Overcoder
Наверх
Меню