为什么调用这个 Javascript/jQuery 函数不起作用

Question

我已将其放在页面顶部（但在 body 标记内）。

<script type="text/javascript">
function displayNumberBounds(numberElement, number){
alert("it works");
  $(numberElement).before("<input type='text' size='6' id='lower' value='"+number+"' class='lt'/> &lt; ");
  $(numberElement).after(" &gt; <input type='text' size='6' id='upper' value='"+number+"' class='gt'/>");
}
</script>

我还有这个（它是模板的一部分）

----编辑----

代码在页面上显示的方式是

..这里有一些JavaScript/HTML........

<script type="text/javascript">
function displayNumberBounds(numberElement, number){
alert("it works");
        $(numberElement).before("<input type='text' size='6' id='lower' value='"+number+"' class='lt'/> &lt; ");
        $(numberElement).after(" &gt; <input type='text' size='6' id='upper' value='"+number+"' class='gt'/>");
}
</script>

更多代码这里 ...

<script>
$(document).ready(function() {
$(".number-value").click(function() {
  displayNumberBounds(this,0);
  });
});
</script>

0

...循环迭代，从而给出第二个值...

<script>
$(document).ready(function() {
$(".number-value").click(function() {
    displayNumberBounds(this,0);
});

}); 0

 <script>
$(".number-value").click(function() {
  displayNumberBounds(this,<%=number%>);
});
</script>
<span class="number-value" value="<%=number%>">
  <%=number%>
</span>

不确定额外信息是否有帮助。

---------- 结束编辑 ---------

当我单击 <%=number%> 打印的值时，我得到了预期的结果适用于页面上的第一个 .number-value 项目，但不适用于后续项目。我不明白这一点。

Answer 1

看起来您正在尝试在元素尚未加载时绑定单击元素。

你能试试这个吗？

<script>
$(document).ready(function() {
    $(".number-value").click(function() {
        displayNumberBounds(this,$(this).html());
    });
});
</script>

查看此工作示例： http://jsfiddle.net/WS7Ha/

我还可以建议您移动为了可维护性，将所有 Javascript 保存到单独的 .js 文件中。

Answer 2

您重新绑定了很多次（n 次），更好的方法是 数据属性，例如您的模板将如下所示：

<span class="number-value" data-value="<%=number%>">
  <%=number%>
</span>

然后在页面顶部一次，绑定到所有这些属性，如下所示:

<script type="text/javascript">
$(document).ready(function() {
    $(".number-value").click(function() {
       var number = $(this).data("value");
       $(this).before("<input type='text' size='6' id='lower' value='"+number+"' class='lt'/> < ")
              .after(" > <input type='text' size='6' id='upper' value='"+number+"' class='gt'/>");
    });
});
</script>

<一href="http://jsfiddle.net/nick_craver/GaDVK/" rel="nofollow">您可以在此处进行测试。

或者，它可能是无效的 HTML，但通过 .attr("value") 使用您的当前属性。 或者，如果文本始终匹配，您可以只使用 $.trim($(this).text()) 代替，不带任何属性。