Question

我有一个简单的表单，其中包含“提交”按钮和刀片模板中的其他“添加”按钮。在表单提交上，有一个对控制器的ajax回调，它验证提供的值。根据控制器返回的结果，我想更改onClick事件的“添加”按钮。这是刀片剪辑：

<button id="theId" type="button" >Add</button>

相关的ajax pice：

$.ajax({
        ...
        success: function(result){
           //Update onClick for the add button
           addButton.onclick=function () {
               //location.href = 'www.example.com';
               window.location="www.example.com";
           };
           addButton.html("aNewName");
        }
}

基于所有来源，location.href或window.location应该将我重定向到另一个页面（在我的情况下只是一个不同的子页面），但事实并非如此。经过几个小时的研究后，我认为我得到了一个错误的按钮，或者是ajax本身的错误，但后来我添加了addButton.html行，这很有效。我在这做错了什么？

Answer 1

获取按钮，最后删除以前的点击事件，使用http / https前缀添加新事件，更改按钮文本

success: function(result){
   var button = document.querySelector('#theId');
   button.addEventListener('click', function () {
       window.location = 'https://www.google.it';
   });
   button.innerHTML = "my new button text";
}

Answer 2

从这里的MDN文档：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Registering_on-event_handlers，通过on *属性注册的处理程序将通过相应的on *属性提供，但不是相反的方式。

这意味着div的onclick属性仍然是HTML中的旧事件处理程序。为了保持理智，请始终使用addEventListener方法注册事件侦听器。

Answer 3

看起来您正在尝试将jQuery对象的onclick属性设置为函数，这不是在jQuery中设置click事件处理程序的正确方法。

您应该使用jQuery对象的click方法来设置单击处理程序。并使用off方法删除以前的处理程序：

addButton.off('click');
addButton.click(function () {
  window.location="https://www.example.com";
})

Here's a working fiddle.

在Laravel中从AJAX更新按钮onClick url

3 个答案: