javascript - jQuery .click() 不工作

Question

因此，我在跨度中创建了一个删除“按钮”，但由于某种原因，我无法让 .click() 触发。有任何想法吗？我是 jQuery 的新手，我认为这很明显。我在 Chrome 和 Safari 中进行了测试，但没有成功。

CSS：

.delete_button {
    cursor:pointer;
    color: #fff;
    border: 1px solid #FFF;
    border-radius: 15px;
    background: #AAA;
    font-size: 8px;
    line-height: 0px;
    padding: 0px 2px 0px 2px;
}

HTML/PHP：

<span class="delete_button" id="delete_<? echo $some_id; ?>">X</span>

jQuery：

$(document).ready(function() {
    $('.delete_button').click(function() {
            var transaction_id = $(this).attr('id').replace('delete_','');
            alert("Delete transaction #" + transaction_id);
            return false;
        });
});

Answer 1

使用.on()

由于您的 span 是动态添加的，因此它在 DOM 准备好或页面加载时不存在。

所以你必须使用事件委托

句法

$( elements ).on( events, selector, data, handler );

像这样

$(document).on('click','.delete_button',function(){
    // code here
});

或者

$('parentElementPresesntAtDOMready').on('click','.delete_button',function(){
   // code here
});

你的代码变成

$(document).ready(function () {
    $(document).on('click', '.delete_button', function () {
        var transaction_id = $(this).attr('id').replace('delete_', '');
        alert("Delete transaction #" + transaction_id);
        return false;
    });
});  

Answer 2

似乎跨度是动态创建的，您需要使用事件委托。将其绑定到最近的静态父级或文档

$(document).on('click','.delete_button',function(){
   /*Your code*/
});

Answer 3

旧的 webkit 有一个更简单的解决方案：通过 CSS 将光标设置为指针以获取 span。测试并在音乐网络应用程序上工作。