按钮OnClick EventListener失效求助：JQuery代码引发冲突

我想实现按钮点击时执行代码，目前用alert做测试。但只要保留#bulkSubmit表单的JQuery提交处理代码，id为btnCheckInSubmit的按钮click事件监听器就完全没反应；把那段JQuery代码注释掉后，按钮功能就正常了。

我的HTML代码 #

<body  style="overflow:hidden;" >
   <div class="addCustomerMain main">
      <h1>Add Customer</h1>
      <hr>
      <form method="post" id="addCustomer">
         <div class="formContent">
            <div class="formElement">
               <label for="custName">Name</label>
               <input class="txtLarge" type="text" name="custName" id="custName">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custAddress">Address</label>
               <input class="txtLarge" type="text" name="custAddress" id="custAddress">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custCity">City</label>
               <input class="txtSmall" type="text" name="custCity" id="custCity">
            </div>
            <div class="formElement">
               <label for="custState">State</label>
               <input class="txtXSmall" type="text" name="custState" id="custState">
            </div>
            <div class="formElement">
               <label for="custZip">Zip</label>
               <input class="txtXSmall" type="text" name="custZip" id="custZip">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custPhone">Phone</label>
               <input type="text" name="custPhone" id="custPhone" class="txtLarge">
            </div>
         </div>
      </form>
      <div class="formContent" id="divCheckInSubmit">
         <div class="formElement">
            <button id="btnCheckInSubmit" class="btnSubmit">Add Customer</button>
         </div>
      </div>
   </div>
   <script src="../js/addCustomer.js" defer></script>
</body>

我的JavaScript代码 #

$(document).ready(function() {
    //bulk submit handler This section works when this form is shown.  In this instance, I have the form
    //I currently have the form hidden
    $("#bulkSubmit").submit(function(e) {
        e.preventDefault();

        var form = $(this);
        var frmUrl = form.attr('action')

        $.ajax({
            type: "POST",
            url: frmUrl,
            data: form.serialize()
        });
    });


});

addButton = document.getElementById('btnCheckInSubmit');
addButton.addEventListener("click", function() {
    alert("clicked");
});

解决方法 #

核心原因 #

页面中不存在#bulkSubmit这个表单元素，JQuery执行绑定逻辑时，form.attr('action')会返回undefined，导致后续$.ajax调用因URL无效抛出未捕获错误，直接中断了后面按钮事件绑定代码的执行。

修复方案 #

方案1：添加元素存在判断，避免无效请求

$(document).ready(function() {
    // 先判断bulkSubmit表单是否存在，再绑定事件
    const bulkForm = $("#bulkSubmit");
    if (bulkForm.length > 0) {
        bulkForm.submit(function(e) {
            e.preventDefault();
            const frmUrl = bulkForm.attr('action');
            // 确保URL有效再发起请求
            if (frmUrl) {
                $.ajax({
                    type: "POST",
                    url: frmUrl,
                    data: bulkForm.serialize()
                });
            }
        });
    }

    // 绑定按钮点击事件
    document.getElementById('btnCheckInSubmit').addEventListener("click", function() {
        alert("clicked");
    });
});

方案2：统一用JQuery绑定按钮事件

$(document).ready(function() {
    const bulkForm = $("#bulkSubmit");
    if (bulkForm.length > 0) {
        bulkForm.submit(function(e) {
            e.preventDefault();
            const frmUrl = bulkForm.attr('action');
            if (frmUrl) {
                $.ajax({
                    type: "POST",
                    url: frmUrl,
                    data: bulkForm.serialize()
                });
            }
        });
    }

    // JQuery方式绑定点击事件
    $("#btnCheckInSubmit").click(function() {
        alert("clicked");
    });
});

方案3：捕获错误，避免中断后续代码

如果要保留原代码结构，可以添加错误捕获：

$(document).ready(function() {
    try {
        $("#bulkSubmit").submit(function(e) {
            e.preventDefault();

            var form = $(this);
            var frmUrl = form.attr('action')

            $.ajax({
                type: "POST",
                url: frmUrl,
                data: form.serialize()
            });
        });
    } catch (err) {
        console.error("Bulk submit handler error:", err);
    }
});

addButton = document.getElementById('btnCheckInSubmit');
addButton.addEventListener("click", function() {
    alert("clicked");
});

内容的提问来源于stack exchange，提问作者D B