在jQuery问题中添加onclick属性

-3

我有一个带有next和prev按钮的传送带。他们有一个类名nav-arrow。我的问题是没有按钮。他们是<a>。有href值#。所以当我点击它们时，滚动跳转到顶部。所以我做了这个脚本：在jQuery问题中添加onclick属性

<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>

事实并非如此。为什么？我不明白。

来源

2015-10-09 Chester

你不明白为什么附加一个函数到一个onclick处理程序工作，但只是添加文本（“返回false”）不？真？ – Jamiec

@Jamiec其实，他们都在工作。设置属性'onclick =“返回false”'预计会起作用，它确实有效。 –

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

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

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

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

<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>

注意，如果在页面加载，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); 
    }); 
});

来源

2015-10-09 08:28:38

好吧，我明白这一点。但这不是我的问题。我的问题是为什么我的第一种方法工作，而另一个不.Thx :) – Chester

@Chester他们都工作。查看编辑。 –

@Chester查看我的编辑。稍微改进一下。 –

在第二种情况下，你是一个字符串值，只需连接到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>

来源

2015-10-09 08:32:49 vijayP

当心，从jQuery的事件处理程序返回false是event.preventDefault();&event.stopPropagation();简写。从内联js脚本返回false只防止默认行为，不停止传播。

所以我想你的问题（如果有的话？！），如果你看到不同的行为，是因为在你的第二种情况下，单击事件气泡父母（S）。

来源

2015-10-09 08:44:19

在jQuery问题中添加onclick属性

回答

相关问题