单击按钮时更新div

Question

Can someone tell me what is wrong with this piece of code. i am trying to update the div with the class display whenever the a tag is click

var current = 0;

function nextPage() {
    current++;
    return current;
}

$(document).ready(function (e) {
    $("a").click(function () {
        $(".display").text(nextPage());
        return false;
    });
});

Answer 1

In your code line

$(".display").text(nextPage());

$(".display") returns a set of elements. Your actual target element might not be the first therein. Use $.each to iterate over every one or use the id-selector to specify a single DOM-element.

---

.each() example: ( Demo )

$(document).ready(function (e) {
    $("a").click(function () {
        $(".display").each(function (index, element) {
            $(element).text(nextPage());
        });
        return false;
    });
});

---

id-selector example: ( Demo )

$(document).ready(function (e) {
    $("a").click(function () {
        $("#display2").text(nextPage());
        return false;
    });
});

Answer 2

To ensure that all dynamically inserted elements will have an event use .on .

This example on jsFiddle

$(document).on("click", "a", function () {
    $(".display").text(nextPage());
    return false;
});

Note: <!-- comment --> only works on HTML, for Javascript use // comment or /* comment */