Question

我有一个带有next和prev按钮的旋转木马。他们的班级名称为nav-arrow。我的问题是没有按钮。他们是<a>。拥有href值#。所以当我点击它们时，滚动跳到顶部。所以我制作了这个剧本：

<script type="text/javascript">
    jQuery(window).load(function(){  
        var js = "return false;";
        var newclick = new Function(js);
        jQuery(".nav-arrow").each(function(){
            jQuery(this).attr('onclick', '').click(newclick);
        });
    }); 
</script>

它有效。但如果我改变了我的脚本：

<script type="text/javascript">
    jQuery(window).load(function(){  
        var js = "return false;";
        //var newclick = new Function(js);
        jQuery(".nav-arrow").each(function(){
            jQuery(this).attr('onclick', js);
        });
    }); 
</script>

它没有。为什么？我不明白..

Answer 1

添加onclick属性不是一个好习惯。在这种情况下，向元素添加处理程序要好得多：

jQuery(".nav-arrow").on("click", function () {
    return false;
});

你的第二个例子也有效。见下文。确保页面上存在元素。

＆＃13;

jQuery(window).load(function() {
  var js = "return false;";
  //var newclick = new Function(js);
  jQuery(".nav-arrow").each(function() {
    jQuery(this).attr('onclick', js);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com" class="nav-arrow">test</a>

＆＃13;

请注意，如果加载了该页面，则不会再次触发load。您可以改为使用ready：

jQuery(window).ready(function() {
  var js = "return false;";
  //var newclick = new Function(js);
  jQuery(".nav-arrow").each(function() {
    jQuery(this).attr('onclick', js);
  });
});

Answer 2

在第二种情况下，您只是将一个字符串值附加到onclick处理程序。因此它不起作用。它期待一个函数，它找到了一个字符串。所以它什么都不做。但是，如果你做了第一种方法或下面的方法，那么它就会起作用：

<script type="text/javascript">
    jQuery(window).load(function(){  
        var js = "return false;";

        jQuery(".nav-arrow").each(function(){
            jQuery(this).attr('onclick', function(){
               eval(js); //evaluating the string into javascript code
            });
        });
    }); 
</script>

Answer 3

注意，从jQuery事件处理程序返回false是event.preventDefault(); ＆amp; event.stopPropagation();的简写。从内联js脚本返回false只会阻止默认行为，而不是停止传播。

所以我猜你的问题（如果有的话！），如果你看到不同的行为，是因为在你的第二种情况下，点击事件会向父母发送气泡。

在jQuery问题

3 个答案: