jquery - javascript: Get value by clicking on current value in loop - Stack Overflow

admin管理员组

文章数量:1421750

I am building datatables and by setting up total records in database I have total count of them.

Now I am little confused about click event in JavaScript. This is how i am doing this:

 for (var cnt = pageno; cnt < pageno + 5; cnt++) {
                $("#newList").append('<li id="pageno" value=""' + cnt + ' onclick="GetPageno();" > ' + cnt + '</li>');
            }

This is my current loop that will set 5 numbers of list. Now if I want to get value of current list then I am doing this:

function GetPageno() {
        //this.val();


        alert(document.getElementById('pageno').val());


    }

I have 1 to 5 numbers list on web page.

How do I get value of that number I clicked?

Ex. If I clicked "5", then alert should be ing with value "5", same as for all the list elements.

I am building datatables and by setting up total records in database I have total count of them.

Now I am little confused about click event in JavaScript. This is how i am doing this:

 for (var cnt = pageno; cnt < pageno + 5; cnt++) {
                $("#newList").append('<li id="pageno" value=""' + cnt + ' onclick="GetPageno();" > ' + cnt + '</li>');
            }

This is my current loop that will set 5 numbers of list. Now if I want to get value of current list then I am doing this:

function GetPageno() {
        //this.val();


        alert(document.getElementById('pageno').val());


    }

I have 1 to 5 numbers list on web page.

How do I get value of that number I clicked?

Ex. If I clicked "5", then alert should be ing with value "5", same as for all the list elements.

• javascript
• jquery

• $(this).val() inside GetPageno should do it. – MD Sayem Ahmed Commented Apr 3, 2013 at 4:42
• li shouldn't have value attributes, ids should be unique, you shouldn't use inline javascript, val() a jQuery method ... – Musa Commented Apr 3, 2013 at 4:45

8 Answers 8

By doing <li id="pageno" this you are repeating same id more than once and thats not correct.

Instead use <li id="pageno_'+cnt+'" and use below code.

$(document).on('click','li[id^="pageno_"]',function(){
   alert($(this).attr('value'));
});

DEMO

id's must be unique, you could do:

for (var cnt = pageno; cnt < pageno + 5; cnt++) {
   $("#newList").append('<li class="pageno" value="'+cnt+'"> ' + cnt + '</li>');
}

and:

$("#newList").on("click", "li.pageno", function() {
  alert( $(this).val() );
});

jsFiddle Demo

There is a small mistake in your value attribute. The double quote to be moved just after the cnt. And Pass the li object to the function i.e, GetPageno(this) as follows,

 for (var cnt = 1; cnt <= 5; cnt++) {
     $("#newList").append('<li id="pageno" value="' + cnt + '" onclick="GetPageno(this);" > ' + cnt + '</li>');
 }

Then get the value of the li object passed in the method.

function GetPageno(obj) {
    alert(obj.value);
}

You are calling val() on li which is not correct, you can use .attr("value") it would be better if you use data() attributes e.g data-someattributeName to make it more clear. You are assigning same id to more then one elements which is not legal. Assign a class to them and bind event with class and you will be able to get the required attribute.

Add class to li element when you create them, you are not assigning cnt to value properly and assigning empty string to value

for (var cnt = pageno; cnt < pageno + 5; cnt++) {
     $("#newList").append('<li id="pageno" class="pageno" value=""' + cnt + ' onclick="GetPageno();" > ' + cnt + '</li>');
}

Bind click event using class selector

$(".pageno").click(function() {
    alert($(this).attr('value'));
})

Live Demo, using data() and class selector. Here I have also assigned unique Ids to pageno.

pageno = 1;
for (var cnt = pageno; cnt < pageno + 5; cnt++) {
     $("#newList").append('<li id="pageno"'+cnt+' class="pageno" data-custom="' + cnt + '" onclick="GetPageno();" > ' + cnt + '</li>');
}

$(".pageno").click(function() {
    alert($(this).data('custom'));
});

Do like this:

for (var cnt = pageno; cnt < pageno + 5; cnt++) {
                    $("#newList").append('<li id="pageno"+cnt value=""' + cnt + ' onclick="GetPageno(this.value);" > ' + cnt + '</li>');
                }
    function GetPageno(val) {


            alert(val);


        }

you should use class name for all

for (var cnt = pageno; cnt < pageno + 5; cnt++) {
 $("#newList").append('<li class="pageno" value="'+cnt+'"> ' + cnt + '</li>');
}

$(".pageno").click(function() {
alert($(this).attr('value'));

$(".pageno").each(function() {
    alert($(this).attr('value'));
})