в Javascript Dom новый элемент не может быть выбран? - PullRequest
Новая
       1

в Javascript Dom новый элемент не может быть выбран?

0 голосов
/ 17 октября 2011 
<body>
<div id="options">
        <p class="input">
            <input type="text"/>
            <a class="remove" >Remove</a>
        </p>
        <p class="input">
            <input type="text"/>
            <a class="remove" >Remove</a>
        </p>
</div>
<a href = "#" id ="click" >Add Option</a>
</body>

И ： 

$(function() {
$("#click").click(function add_option(){
    var options = document.getElementById("options");
    var p=document.createElement("p");
    p.setAttribute("class","input");
    var input=document.createElement("input");
    input.setAttribute("type","text")
    options.appendChild(p);
    p.appendChild(input);               
    var a=document.createElement("a");
    a.setAttribute("class","remove");

    var text = document.createTextNode(" Remove");
    a.appendChild(text);
    insertAfter(a,input);//if exist insertAfter
              }
              )

$(".remove").click(function remove_option(){

$(this).parent().remove();  
}) 
})

, когда я нажимаю Add Option, это работает, но когда я нажимаю remove только что добавленного, оно не удаляется.Селектор ".remove") влияет на него? (первые два remove работают). Как заставить работать новые добавленные элементы？

Ответы [ 3 ]

3 голосов
/ 17 октября 2011

попробуйте использовать его с .live()

$(".remove").live("click",function(){    
$(this).parent().remove();  
});
2 голосов
/ 17 октября 2011

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

Вы можете решить эту проблему, используя .live [документы] или .delegate [документы] 

$(".remove").live('click', function(){
    $(this).parent().remove();  
});

Эти методы связывают обработчик событий с корнем документа и проверяют каждое событие click (в данном случае) и проверяют, соответствует ли цель селектору. Если это так, обработчик выполняется.

Я бы также посоветовал вам не смешивать простые DOM-операции и jQuery. Ваш обработчик событий click может быть записан более кратко: 

$("#click").click(function(){
    $('<p />', {'class': 'input'})
      .append($('<input />', {type: 'text'})
      .append($('<a />', {'class': 'remove', href: '#', text: 'Remove'})
      .appendTo('#options');
});

Существуют исключения, такие как доступ к свойствам элементов DOM, но здесь вы действительно должны использовать jQuery.

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

Это работает: http://jsfiddle.net/UJERQ/

$("#click").click(function add_option(){

    $("#options").append('<p class="input"><input type="text"/><a class="remove" > Remove</a></p>')

    addTheClicks();
})

    function addTheClicks(){
       var btns = $(".remove");
       var btnsLength = btns.length;

        for(i=0;i<btnsLength;i++){
         var hasClickAlready =  $.data(btns.eq(i).get(0), 'events' );
            if(hasClickAlready == null){
                btns.eq(i).click(function(){
                    $(this).parent().remove()
                        })
            }
        }

    }



addTheClicks();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...