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

看起来你正在尝试在尚未加载元素时绑定click元素。

请你试试。

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

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

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

Answer 2

你重新绑定了很多，（n次），更好的方法就像data attribute，例如你的模板看起来像这样：

<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'/> &lt; ")
              .after(" &gt; <input type='text' size='6' id='upper' value='"+number+"' class='gt'/>");
    });
});
</script>

You can test it out here

或者，它将是无效的HTML，但通过.attr("value")使用您的当前属性。或，如果文字总是匹配，则可以使用$.trim($(this).text())代替，而不使用属性。

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

2 个答案: