Почему не работает эта функция 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

Похоже, вы пытаетесь связать элемент click, когда элемент еще не загружен.

Можете ли вы попробовать это, пожалуйста.

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

Вы можете проверить это здесь .

Или это будет недопустимый HTML, но используйте атрибут current через .attr("value"). Или , если текст всегда совпадает, вы можете просто использовать $.trim($(this).text()) без атрибута.