Как добавить функцию в добавленную строку html в jQuery? - PullRequest
Новая
       26

Как добавить функцию в добавленную строку html в jQuery?

0 голосов
/ 07 октября 2011

Я новичок в jQuery, а также в веб-разработке.: -)

Я хочу создать страницу создания вопросов.Он имеет текстовое поле с вопросом и кнопку добавления.Когда пользователи нажимают кнопку добавления, появляется новое текстовое поле с вопросом, а в следующей строке появляется новая кнопка добавления.Но старая кнопка «Добавить» станет кнопкой «Удалить» и изменит свои функциональные возможности.

Вот код jQuery: 

$(function () {
        $(".buttonMinus").hide();

        $(".buttonPlus").click(function (event) {
        $(this).remove(".buttonPlus");
        $(".buttonMinus").show();
        $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>");   **//  Here !!!!**
        alert("Welcome " + $(".ttt").val() + "!");        
    });

    $(".buttonMinus").click(function (event) {
        alert("You have pressed the DELETE button!");
    });

});

А вот код HTML: 

<body>
<div class="demo">
    <p id="p1">Your name: <input type="text" class="ttt"/>
    <button class="buttonPlus" type="button"></button>
    <button class="buttonMinus" type="button"></button></p>
    <br />
</div>      
</body>

Я поместил все кнопки «Добавить» и «Минус» в два разных класса: «.buttonPlus» и «.buttonMinus»..ButtonPlus хорошо работает, когда строка добавляется основным html.Но он не работает, когда он добавляется функцией .append ().Он просто добавляет CSS-код .buttonPlus к своей кнопке, но $ (". ButtonPlus"). Click (function (event) {...} НЕ присоединяется к новому buttonPlus.

Не могли бы вы, ребята,скажите, почему и как я могу решить эту проблему?

Спасибо, Эшли

Ответы [ 3 ]

0 голосов
/ 07 октября 2011

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

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

0 голосов
/ 07 октября 2011

Добро пожаловать в JQuery! Это общая проблема. Проблема вызвана тем, что новый элемент .buttonPlus не существует в то время, когда вы впервые связываете событие click с .buttonPlus. При первом связывании события click оно будет привязано только к элементам, уже существующим на странице. Это вся причина, по которой вы заключаете весь код в $(function()) - он гарантирует, что он не будет работать, пока не будут созданы все элементы DOM.

Есть несколько разных решений. Самый простой способ - использовать метод jQuery .live(), как предлагает Райан. Это автоматически связывает указанное событие click с любыми новыми .buttonPlus элементами, которые создаются.

Однако, хотя это простейшее решение, оно также очень затратно для вычислений. Я не буду вдаваться в подробности здесь, но использование .live() почти никогда не является лучшим вариантом. Существует аналогичный метод jQuery под названием .delegate(), который можно использовать вместо этого. Однако, хотя .delegate() дешевле, чем .live(), в вашем случае это не лучшее решение.

Лучшее решение, как намекает Диодей, - это «заново связать эти элементы, когда они будут добавлены». Вы можете сделать это следующим образом: 

function btnClickEvent(btn){
    btn.remove(".buttonPlus");
    $(".buttonMinus").show();
    $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>");
    alert("Welcome " + $(".ttt").val() + "!");

    //Re-binding
    var newBtn = $("#p1").find('.buttonPlus:last');
    newBtn.click(function(){
        btnClickEvent(newBtn);
    });
}

$(function(){
    $(".buttonMinus").hide();

    $(".buttonPlus").click(function(){
        btnClickEvent($(this));
    });

    $(".buttonMinus").click(function (event) {
        alert("You have pressed the DELETE button!");
    });
}

Как видите, все, что мы делаем, - это помещаем код, который запускается в событии click, в отдельную функцию. Это позволяет нам легко привязать его к новой кнопке. Возможно, вы захотите сделать то же самое со своими кнопками минус.

0 голосов
/ 07 октября 2011

Вот модифицированная, но рабочая версия того, что происходит в вашем коде ...

Вы, вероятно, захотите использовать функцию jQuery live () следующим образом ... 

$(".buttonPlus").live("click",function (event) {
    $(this).remove(".buttonPlus");
    $(".buttonMinus").show();
    $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>");   **//  Here !!!!**
    alert("Welcome " + $(".ttt").val() + "!");
});

$(".buttonMinus").live("click",function (event) {
    alert("You have pressed the DELETE button!");
});

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

...