jQuery 事件委托不适用于某些按钮

Posted 2023-05-09

【中文标题】jQuery 事件委托不适用于某些按钮

【英文标题】：jQuery event delegation not working for some buttons

【发布时间】：2016-07-21 02:52:07

【问题描述】：

我正在使用名为bluimp 的jQuery 文件上传插件。我的 2 个按钮（start、cancel）正在动态形成，因此我无法将事件侦听器附加到它们。我已将一个侦听器附加到它们最近的静态祖先，即 ID 为 fileupload 的表单。通过start按钮成功上传后形成delete。

delete 按钮侦听器正在工作，但start 却没有。 （我说的是两个按钮的自定义侦听器以执行其他操作。blueimp 提供的默认操作工作正常。）

代码sn-ps：

html（动态生成的按钮html）

<td>
    <button id="start-upload-button" class="btn btn-primary start">
        <i class="glyphicon glyphicon-upload"></i>
        <span>Start</span>
    </button>
    <button class="btn btn-warning cancel">
        <i class="glyphicon glyphicon-ban-circle"></i>
        <span>Cancel</span>
    </button>
</td>

点击start并上传完成后delete的html就形成了

<button id="file-delete-button" class="btn btn-danger delete" data-type="POST" data-url="/delete/25">
    <i class="glyphicon glyphicon-trash"></i>
    <span>Delete</span>
</button>

js

$(document).ready(function() 
    $('#fileupload').on("click", "#file-delete-button", function(event) 
        console.log("Delete event fired");
        $("#sourcetext").hide();
    );

    $('#fileupload').on("click", "#start-upload-button", function(event) 
        console.log("Upload event fired");
        $("#sourcetext").hide();
    );
);

【问题讨论】：

你说，start 创建了delete，但delete 工作正常而start 不是。那么delete是怎么出现的呢？

我在start 上的听众不工作。 start 正在按预期工作，并且行为是从 blueimp 借来的，我还没有编写任何自定义行为。所以delete的形成由blueimp处理。我只想在单击start 时执行其他操作，而blueimp 不会这样做。

【参考方案1】：

您应该使用on 函数。 bind 事件已被弃用。

$(document).on('fileuploadstart', '#fileupload',function(e)
     console.log("Upload event fired");  
);

即使元素是自动生成的，这也将保证元素中的绑定。

【参考方案2】：

看来您应该按照 manual 将回调绑定到您的按钮

$("#fileupload").bind('fileuploadstart', function(e)
     console.log("Upload event fired");  
);

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素

【讨论】：

是的，您是对的，我应该按照手册进行操作。我很困惑，因为我没有看到与我的方法中的 2 个按钮相同的行为。无论如何，谢谢。

不客气，我从未读过有关 blueimp 但它看起来很有趣 :)