onclick method to dynamically created button in javascript

Question

I am using jquery-mobile package to develop web based mobile application. From a php script I read the button id's from MySQL and send id's to JavaScript method to create a button for it. However I want to add onclick listener also, ofcourse, but I could not manage it. Any help please.

<div data-role="content2" >
    <script type="text/javascript">
        function createButton(n) {
            $('[data-role="page"]').append('<button  data-theme= "b" id="btnInit' + n + '" >' + n + '</button>');// here I want to add onclick listener
        }

    <?php
        include './_fonksiyon.php';
        $query = ("
            SELECT
                tbl_ustmenu.Id AS id,
                tbl_ustmenu.AdiT AS adi
            FROM tbl_ustmenu
            WHERE tbl_ustmenu.Aktif=1
            AND   tbl_ustmenu.UstMenuId=0
            ORDER BY tbl_ustmenu.Sira ASC
                                    ");
        $result = mysql_query($query);
        $count = 0;
        while ($count < mysql_num_rows($result)) {
            $i = (mysql_result($result,$count, ($id)));
            $count++;
        ?>
            createButton(<?php echo ($i) ; ?>);

        <?php
        }
        ?>
    </script>
    </div>

Consider indenting things ... er, differently.

Dan Lugg
– Dan Lugg

2014-07-17 13:50:49 +00:00
Commented Jul 17, 2014 at 13:50 — Dan Lugg
– Dan Lugg, Commented Jul 17, 2014 at 13:50

hex494D49 · Accepted Answer · 2014-07-17 13:59:13Z

1

Replace your createButton with the snippet below, or create a separate function using the same snippet.

<script type="javascript">
    var button = document.createElement("INPUT");
    button.type = "button";
    button.name = "button";
    button.value = "Click me";
    button.id = "<?php echo $i ?>";
    button.onclick = function() {
        // ...
        // function body
    };
    // you may append it to any element you need
    document.body.appendChild(button);
</script>

edited Jul 17, 2014 at 13:59

answered Jul 17, 2014 at 13:51

hex494D49

9,2453 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MoshMage Over a year ago

I like how you just went native with it :)

hex494D49 Over a year ago

@MoshMage Old school :)

Boris · Accepted Answer · 2014-07-17 13:55:07Z

0

Save the button to a variable first, it's more readable

var btn = $('<button  data-theme= "b" id="btnInit' + n + '" >' + n + '</button>');
btn.click(function() {
    alert('here we go');
});
$('[data-role="page"]').append(btn);

answered Jul 17, 2014 at 13:55

Boris

6096 silver badges20 bronze badges

6 Comments

Furkan Aytaç Over a year ago

Thank you for your help. It is solved by this way. By the way, I want to ask one more thing. "adi" variable in the query returns a string, how can I pass it to myfunction, createButton? I both need to pass integer and a string(id,adi)

Boris Over a year ago

1. Extend your createButton-function: function createButton(n,adi) {} 2. Extend your php-echo: createButton(<?php echo($i).",".echo($adi); ?>); Not very familiar with php, maybe you need to reference $adi correctly

Furkan Aytaç Over a year ago

I know that, but javascript does not accept strings as integers. I know I have to remove the quotations in it, but I am not sure how to :) thanks anyway

Boris Over a year ago

Ah, my fault. Try this: createButton(<?php echo($i).", '".echo($adi)."'"; ?>);

Boris Over a year ago

Sorry, I'm not familiar with PHP. <?php echo($i.",'".$adi."'"); ?> Your JavaScript output (view source) should be createButton(1, 'adi-string');

|

chf · Accepted Answer · 2014-07-17 13:53:24Z

0

add a class to your button and create a bind on click, like this:

$('[data-role="page"]').append('<button  class="mybuttonclass" data-theme= "b" id="btnInit' + n + '" >' + n + '</button>');



$(".mybuttonclass").on("click",function(e){
    //..
});

answered Jul 17, 2014 at 13:53

chf

7634 silver badges14 bronze badges

1 Comment

Furkan Aytaç Over a year ago

It stops to create buttons after first one is created. It is solved, thanks anyway

Collectives™ on Stack Overflow

onclick method to dynamically created button in javascript

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related