jquery - 从输入按钮制作javascript点击功能

Question

简单的问题，但我只想知道单击此输入按钮时是否正确调用了 javascript。我不能在这个按钮上使用 id。那么我将如何在 javascript 中调用点击事件，而不是使用当前使用的 hte onclick im。

 <input type="button" class="text" value="@video.Text" onclick="@String.Format("videochange('{0}')",url);" />

Answer 1

试试这样

<input type="button" class="text" value="@video.Text" />

$(".test[type='button']").click(function(e){
    e.preventDefault();
    videochange('url');
});

Answer 2

如果您可以使用 jQuery，那么更好的方法是根本没有内联脚本（真的被认为是糟糕的形式）。

尝试这样的事情，而不是：

<input type="button" 
      class="text" 
      value="@video.Text" 
   data-url="@String.Format('{0}',url);" />

（为了便于阅读，将其分成单独的行......此外，根据模板的呈现方式，您可能会遇到意外终止字符串的问题，这就是我将“{0}”更改为“{0}”的原因)

现在，在你的 javascript 中：

// when the dom is ready
$(function() {
    $('.text').click(function(evt){
        evt.preventDefault();
        var url = $(this).data('url');
        videochange(url);
    });
});

这适当地分离了您的角色和职责......服务器端代码保持在服务器端，并将数据提供给视图。视图/客户端脚本然后处理视图端交互，而不会混乱地尝试在两种不同语言之间合并语法。

Answer 3

你可以使用两种方式，

1-纯JavaScript：

<input type="button" class="text" value="@video.Text" />
<script>
buttons = document.getElementsByTagName( 'input' );
for( var i = 0; i < buttons.length; i++ )
{
  Btn = buttons[i];
  if( Btn.className == 'text' )
  {
   Btn.onclick = function()
   {
    /* [...] */
   }
  }
}
</script>

2- [或在 jQuery 中]

$('.text').click(function()
{
  /* [...] */
});