The JQuery function is not working

Question

Hi I click on one of the links given in the save column. Once it is clicked the code between the script tags should be run and give an alert ('BBBBBBBBBBBBBBBBBBBB'). But I can't figure out why it doesn't give the expected result. Please someone help me to correct this

<html>
<title></title>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script></head>
    <script>

$(".QuestionEdit").click(function(){
alert('BBBBBBBBBBBBBBBBBBBB');
var B=$(this).attr('id');

var Data=B.replace("QuestionEdit","");  
alert(Data);

return false;

});

</script>
</head>
<body>


<?php

echo "<form>";


echo "<div id='QuestionDetails' style=' position:relative; top=50px;'>";
$Query="SELECT * FROM Questions WHERE Form_ID='0'";
echo "<table border='1' id='DisplayFormDetailss'>
    <tr style='background-color:#D0A9F5;' height='40px;'>

    <th width='100px;'>Question_ID</th>
    <th width='420px;'>Question Name</th>
    <th width='100px;'>Inactivate</th>
    <th width='70px;'>Edit</th>


    </tr>";
$i=0;

while($i<5){


        echo "<tr height='25px;'>";
        echo "<td><input name='QuestionID[]' id='QuestionID ".$i."' align=center value='8'></input></td>";
        echo "<td><input name='QuestionName[]' style='width:420px;' id='QuestionName".$i."' align=left value='7'></input></td>";
        echo "<td name='QuestionInactive[]' id='QuestionInactive".$i."' align=center><input type='checkbox'></input></td>";
        echo "<td class='QuestionEdit' id='QuestionEdit".$i."' align=center><a href='' align=left>Edit</a></td>";

        echo "</tr>";
        $i++;
}


echo "</table>";
echo "</div>";
echo "<div id='Sub' style='position:relative; top:50px;'>";
 echo "<input  type='submit' value='Save The Table'></input>";
 echo "</div>";
echo "</form>";

?>
</body> 
</html>

Please read the [jQuery tutorial](http://learn.jquery.com/about-jquery/how-jquery-works/). It explains how to get started with jQuery. *"To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the [ready event](http://api.jquery.com/ready/)"* — Felix Kling, Dec 07 '13 at 16:52

score 2 · Accepted Answer · answered Dec 07 '13 at 16:51

2

The div.QuestionEdit is not loaded when the script executes. Wrap the script in $(document).ready() to execute when the DOM is available.

$(document).ready(function(){
    $(".QuestionEdit").click(function(){
        alert('BBBBBBBBBBBBBBBBBBBB');
        var B=$(this).attr('id');

        var Data=B.replace("QuestionEdit","");  
        alert(Data);

        return false;
    });
});

answered Dec 07 '13 at 16:51

Kevin Bowersox

93,289
19
159
189

Thanks for to you too replying Kevin. – t4thilina Dec 07 '13 at 17:15

score 1 · Answer 2 · answered Dec 07 '13 at 16:51

1

Solution:

$(document).ready(function() {
  $(".QuestionEdit").click(function(){
    alert('BBBBBBBBBBBBBBBBBBBB');
    var B=$(this).attr('id');

    var Data=B.replace("QuestionEdit","");  
    alert(Data);

    return false;

   });
});

answered Dec 07 '13 at 16:51

nativehr

222
2
8

score 1 · Answer 3 · answered Dec 07 '13 at 16:55

1

Your script is running before the document has loaded.

Use the document ready callback to run any jQuery code that needs to access the DOM so it runs when the DOM is loaded.

$( document ).ready(function() {
  // Handler for .ready() called.

});

answered Dec 07 '13 at 16:55

mjhinch

771
4
8

The JQuery function is not working

3 Answers3