Question

我创建了一个按钮（存在的欺骗），点击现有按钮。但是，当我点击时，新创建的按钮不会创建另一个按钮。

这是我的代码

$('.add-more, .dropdown button').click(function(event){
    var elementToBeAdded;
    if(event.target.nodeName === "IMG"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "BUTTON"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "SPAN"){
        elementToBeAdded = event.target.parentElement.parentElement;
    }
    var newElement = elementToBeAdded.outerHTML;
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length);
    newElement = $(newElement)
    $(elementToBeAdded).parent().append(newElement);
})

上面的代码工作正常并创建了重复按钮，但是欺骗无法在点击时运行代码。请帮帮我。

Answer 1

将点击处理程序添加到新元素。

将主逻辑移动到单独的函数中可能更容易，因此您可以轻松地将该函数作为单击处理程序附加。

Answer 2

如果元素具有相同的类，即.add-more和.dropdown及其一个按钮，那么这就是解决方案

$('.add-more, .dropdown button').on('click', function(event){
    var elementToBeAdded;
    if(event.target.nodeName === "IMG"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "BUTTON"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "SPAN"){
        elementToBeAdded = event.target.parentElement.parentElement;
    }
    var newElement = elementToBeAdded.outerHTML;
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length);
    newElement = $(newElement)
    $(elementToBeAdded).parent().append(newElement);
})

Answer 3

如this中所示，已经回答的问题，你必须使用这样的事件委托：

$(document).on('click', '.add-more, .dropdown button', function(event){
    // ...
})

因为动态创建的elemenet不具有任何事件处理程序，除非它们在创建后附加到它们。因此，不是在元素本身上创建一个事件处理程序，而是可以将它放在一个元素（这些元素的父元素）上，你知道它肯定会存在（我在这里使用document，它可以是任何元素其他因素，条件是必须始终存在）。您将事件处理程序附加到该固定元素（document）并告诉它何时发生事件（第一个参数），检查目标元素是否与选择器匹配（第二个参数'.add-more, .dropdown button'），如果是然后在该元素上调用函数（第三个参数）。

为什么动态创建的元素没有事件监听？：

因为，这段代码就在这里：

$('selector').click(function(){
    // ...
})

选择与选择器匹配的所有元素（'selector'）并逐个循环它们（THE SELECTED ELEMENTS），使用基本的JS函数（addEventListener {分配作为事件监听器传递的函数{1}} ...）。此时运行此代码时，您未来动态创建的元素不存在，因此它们不会附加到该事件（因为它们尚不存在）。当它们确实存在时，这行代码attachEvent已经被执行（因为javascript执行代码指令接着另一行，没有返回到先前执行的指令）。因此，不会检查是否存在匹配的新元素。要理解这里是一个简单的java脚本示例：

$('selector').click(...)

Answer 4

我自己做了这件事。它正在发挥作用。

var addBtns = document.querySelectorAll('.add-more, .dropdown button');
addClick(addBtns);
function addClick(addBtns){
    Array.prototype.forEach.call(addBtns, function(addBtn) {
      addBtn.addEventListener('click', addClickEvent);
    });
}

function addClickEvent(e){
    var elementToBeAdded;
    if(event.target.nodeName === "IMG"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "BUTTON"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "SPAN"){
        elementToBeAdded = event.target.parentElement.parentElement;
    } else{
        return false;
    }
    var newElement = elementToBeAdded.outerHTML;
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length);
    newElement = $(newElement)
    $(elementToBeAdded).parent().append(newElement);

    addClick(newElement);
}

按钮重复不在jquery中工作？

4 个答案: