CODEWITHSUNDEEP
javascriptjqueryajaxxml
ammu
ammu

Reputation: 117

creating dynamic button and events in jquery

how to create a dynamic button with respect to XML data.Here i have to convert the name (XYZ) to a button and making an event to each dynamic button.Now am getting xyz,50 but i want to change it as button with name xyz,and also events.

<class_members>
 <student>
   <name>XYZ</name>
   <marks>50</marks>
 </student>
 <student>
  <name>ABC</name>
  <marks>25</marks>
  </student>
  </class_members>

jquery code is here.

 <script>
       $(document).ready(function () {
      $("#Submit").click(function () {
            $.ajax({
               type: "GET",
                      url: "marks.xml",
                        dataType: "xml",
                         success: function (xml) {
                                $(xml).find('student').each(function () {
                                   var Name = $(this).find('name').text();
                                    var Mark = $(this).find('marks').text();
                                    $("#content").append('<li>' + Name + " ," + Mark + '<li>');
                             });

                           }
                        });
                    });
                });
             </script>
        </head>
        <body>
            <form id="From1" method="post">
            <input type="button" value="submit" name="Submit" id="Submit" />
            <div id="content">
            </div>
            </form>

Upvotes: 0

Views: 65

Answers (1)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

add button with some class and attach event using that class, like, change:

$("#content").append('<li>' + Name + " ," + Mark + '<li>');

to

$("#content").append("<li><input type='button' class='dyna_btn' value='"+Name+"' /></li>");

and attach event to these buttons:

$(document).on("click", ".dyna_btn", function() {
    //do something here
    console.log("button clicked");
});

Upvotes: 1

Related Questions