javascript works in console but not on page even after adding $(document).ready(function ()

Question

I just can't get this to work. It works fine in the console of Google Chrome. I added $(document).ready(function (). Still no luck. Any help is greatly appreciated. update: I'm trying to get the value of the first cell when the row is selected on a dynamically created html table

Script

<script type="text/javascript">

    $.ajax({
        url: '@Url.Action("VisitList")',
        method: 'post',
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        data: "{id: 112601}",
        success: function (data) {
            //alert("success");
            $('#divData').removeClass('hidden');
            $('#tblBody').empty();
            $.each(data, function (index, value) {
                var row = $('<tr><td>' + value.JobID + '</td><td>'
                    + value.VisitID + '</td><td>'
                    + value.VisitDate + '</td><td>'
                    + value.VisitInfo + '</td><td>'
                    + value.Engineer + '</td></tr>');
                $('#tblData').append(row);
            });
        },
        error: function (xhr) {
            alert(xhr.responseText);

        }
    });

    $(document).ready(function () {
        $("#tblBody tr").click(function (rowElement) {
            //alert("hello");
            var value = $(this).find('td:first').html();
            alert(value);
        })
    });
</script>

Where are you including this script tag ? try including it at the last just before body closing tag — Nandita Sharma, Jul 13 '18 at 11:28
This isn't flagged jQuery but is jQuery, so did you include it? We need some more context, where did you place your scripts? How did you get it to work then? — somethinghere, Jul 13 '18 at 11:29
@NanditaAroraSharma Placing the scripts just before the body closing tag is indeed a good idea, but in this case `$(document).ready(` will have the same effect. — Keith, Jul 13 '18 at 11:30
You mention that the table is dynamicly generated. Is the `$("#tblBody tr")` in the document when you bind the click event? If not, the click event will not work. — Jeppsen, Jul 13 '18 at 11:32
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — CBroe, Jul 13 '18 at 11:34
Thanks for all the comments. @NanditaAroraSharma I included it after the defining the table. — kas_miyulu, Jul 13 '18 at 11:38
@CBroe sorry buddy. this is not a duplicate. I believe my question was different — kas_miyulu, Jul 13 '18 at 11:44
Unless the elements you are trying to select with `#tblBody tr` are present in the document at that point already, this is a duplicate. And since you are clearing your table with `$('#tblBody').empty()` before you add new table rows, that absolutely is the case here. That you have not _understood_ it yet, doesn’t make it less of a duplicate. Even the answer here that you just accepted tells basically the exact same thing. — CBroe, Jul 13 '18 at 11:46

score 3 · Accepted Answer · answered Jul 13 '18 at 11:31

3

As you are adding rows dynamically, you need to use jQuery.on

 $("#tblBody").on("click", "tr", function (rowElement) {
     var value = $(this).find('td:first').html();
     alert(value);
});

answered Jul 13 '18 at 11:31

Nikhil Aggarwal

28,197
4
43
59

score 0 · Answer 2 · answered Jul 13 '18 at 11:30

0

You probably forgot to add a jQuery to the head of your HTML. See the example:

$(document).ready(function(){
  alert("Hello World!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Jul 13 '18 at 11:30

David

383
2
10

score 0 · Answer 3 · answered Jul 13 '18 at 11:33

What is the error?

Try putting this at the start of that Script:

console.log($().jquery);

It should print out the jQuery version so you know jQ is available at that point.

Also, the document might be ready but could it be that you add elements to it later dynamically?

 $("#tblBody tr")

Maybe target for this is missing? Not loaded or you targeted poorly?

In any case, if above does not fix the problem, do include error, relevant HTML structure and any additional code that might change HTML in the question to make it a complete one.

PRO TIP: Questions that have plunker or similar available are solved way faster and do attract more people.

score 0 · Answer 4 · answered Jul 13 '18 at 11:35

0

You could use .on click event on document something like this:

$(document).on('click', '#tblBody tr', function () {
    var value = $(this).find('td:first').text();
    alert(value);
});

answered Jul 13 '18 at 11:35

Adeel

2,901
7
24
34

score 0 · Answer 5 · answered Jul 13 '18 at 11:59

0

If you add any data dynamically at that time you should use jquery .on() method.Like this:

    $("#tblBody").on("click", "tr", function (rowElement) {
     var value = $(this).find('td:first').html();
     alert(value);
   });

answered Jul 13 '18 at 11:59

Avani Somaiya

348
2
7

javascript works in console but not on page even after adding $(document).ready(function ()

5 Answers5