Question

我的导航中的链接看起来与此类似

<a id="navform" href="#" tabindex="-1" onclick="mojarra.ab(this,event,'action','@form','content');return false" class="active"><span>Policy</span></a>

我正在检查表单更改并尝试在有更改时禁用链接的onclick事件，并在用户保存表单时启用它们。

$(':input').on('change', function() {
        formChanged = true;
    });

$('nav a').on('click', function(e){
        if(formChanged){
            e.preventDefault();
            $(this)[0].onclick = null;
        }       
    });

我根据我在这里找到的一些答案尝试了preventDefault和nulling事件，但没有运气。有人可以告诉我如何解决这个问题吗？

UPDATE：

感谢你的所有答案，我得到了一些想法并想出了如何解决它：

if($('.policy-form')){
        $(':input').on('change', function() {
            formChanged = true;
            $('nav a').each(function(){
                var handler = $(this).attr('onclick');
                $(this).removeAttr('onclick');

                $(this).on('click',function(){
                    if(formChanged){
                        invokeDialog("warning");
                        formChanged = false;
                        $(this).attr('onclick', handler);
                    }
                });
            });

        });

Answer 1

普通JavaScript单行

使用

document.getElementById('navform').onclick = null;

这是因为只有最后定义的onclick会运行，在这里我们会用null覆盖它。

注意如果您只是在HTML中避免使用onclick，或者至少要适当地修改mojarra.ab()，那么它会更好，以便它可以执行任何操作只有在你愿意的时候才会采取实际行动。

<强>演示：

document.getElementById('one').onclick = null;

<a id="one" href="#" onclick="alert(true)">Doesn't alerts</a>
<br/>
<a id="two" href="#" onclick="alert(true)">Does alerts</a>

修改

视频评论，以下是打开和关闭旧onclick的示例：

var button = document.getElementById('button');
var oldOnclick = button.onclick;

document.getElementById('toggle').addEventListener('click', function() {
  button.onclick = button.onclick !== null ? null : oldOnclick;
})

<input id="button" type="button" onclick="alert('Test')" value="Alert"/>
<br/>
<br/>
<input id="toggle" type="button" value="Toggle above button"/>

Answer 2

你不能这样做，因为on（'click'事件和内联的事件是两个不同的事件，并且没有办法告诉哪个事先发生。但是，你可以用你自己的处理程序替换内联处理程序像这样

on('click', function(e) {
  if (formChanged) {
    mojarra.ab(...);
  }
});

Answer 3

$('nav a').on('click', function(e){
    $(this).removeAttr('onclick'); // add this line to remove inline onclick
    if(formChanged){
        e.preventDefault();
        $(this)[0].onclick = null;
    }       
});

Answer 4

您可以使用.off（）方法：

$('nav a').off('click');

一个好的方法是在事件中添加命名空间。

$('nav a').on('click.somenamespacehere', function(e){

});

...

$('nav a').off('click.somenamespacehere');

在这种情况下，您可以稍后指定要删除的事件（使用off方法）

Answer 5

使用内联单击功能，可以控制逻辑流程或执行附加到同一事件的功能的顺序。

一种可能性是更改内联代码，以便您可以定义第一个函数，并根据结果，您可以决定是否执行下一个函数。

我的片段：

＆＃13;

// assuming the inline onclick function is like:
function mojarra_ab(_this, event, _action, _form, _content) {
  $('<p>Executed function: mojarra_ab</p>').appendTo('body');
}

function myNewClick() {
  $('<p>Executed function: myNewClick</p>').appendTo('body');
  if ($('#yesNo option:selected').val() == 'true') {
    return true;  // return true to execute the mojarra_ab function
  } 
  return false;  // return false if you don't need to execute the mojarra_ab function
}

$(function () {
  $('nav a').attr('onclick', function(index, attr) {
    return 'if (myNewClick() == true) {' +  attr + '}';
  });
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Choose if to run myNewClick and then mojarra_ab: <select id="yesNo">
    <option value="true" selected>True</option>
    <option value="false">False</option>
</select>
<nav>
    <a id="navform" href="#" tabindex="-1" onclick="mojarra_ab(this,event,'action','@form','content');return false"
       class="active"><span>Policy</span></a>
</nav>

＆＃13;

在jQuery中覆盖内联单击事件

UPDATE：

5 个答案:

普通JavaScript单行

修改