CODEWITHSUNDEEP
javascriptphpjquery
Sgt.yang
Sgt.yang

Reputation: 91

How get id from dynamic button ? (jQuery)

I use jQuery & PDO to dynamic a pagination

When I create some button which have id = xx

Then use jQuery try get one of button id , It isn't work

This is my code:

$records    = $databaseConnection->query("SELECT * FROM area ORDER BY FIELD(local,'Earth','Mars','Mercury','Sun')LIMIT $start, $records_per_page");
$count      = $records->rowCount();
$HTML='<table border="1"><tr><th>local</th><th>target</th><th>detail</th></tr>';
if($count > 0)
{
    foreach($records as $row) {
        $HTML.='<tr>';
        $HTML.='<td>'.$row['local'].'</td>';
        $HTML.='<td>'.$row['target'].'</td>';
        $HTML.='<td><button class = click id ='.$row['id']. '>detail</button></td>';
        $HTML.='</tr>';

    }
$HTML.='</table>';
}

else
{
    $HTML='No Data Found';
}
echo $HTML;
echo $pagination;

This is my jQuery code:

$(document).ready(function(){
  $("button").click(function(){
    alert(this.id);
  });
});

If I code :

<html>
    <head>
        <title> Planet </title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="library/jQuery/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    alert(this.id);
                });
            });
        </script>
    </head>
    <body>

    (dynamic of pagination code)
    ...
    ...
    ...

    <button id = "1"> try </button>
    </body>
</html>

when I click the button which id = 1 ,It is work

But dynamic button isn't working...

What worng in my code ??

Upvotes: 2

Views: 10199

Answers (3)

thisisboris
thisisboris

Reputation: 431

Your code says:

$HTML.='<td><button class = click id ='.$row['id']. '>詳情</button></td>';

Shouldn't that be:

$HTML.='<td><button class="click" id="'.$row['id']. '">詳情</button></td>';

Otherwise the HTML is invalid.

Upvotes: 0

Amar Singh
Amar Singh

Reputation: 5622

Sorry I just saw that you talking about dynamic added buttons. I'm quite sure that delegated event handlers would help: http://api.jquery.com/on/

Explanation of your problem:

As you append your html dynamically, the newly created DOM objects don't have the event handlers attached because the code that attaches the handler has already run.

With delegated event handlers, you attach your event handlers to the parent element that exists at the time we run the code (it's document in this case). When the child elements are clicked (no event handlers), the event is bubbled up by browser and is handled by its parent (with event handlers attached)

Example

$(document).on('click',".close_fast",function(event){
     alert("hi");
 });

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You have to bind click handler using .on() for dynamically created elements, see below code

$(document).ready(function(){
  $(document).on("click","button",function(){
    alert(this.id);
  });
});

More Information - .on()

Upvotes: 5

Related Questions