Bright
Bright

Reputation: 79

jquery mobile with live event

i'm hoping somebody would assist me in this.

I would like to add event like keydown or any other event to elements insert into the dom using snippet below. i'm loading the html from the server.

$(document).delegate("#services", "pagebeforecreate", function(inEvent) {
     $.ajax({
         url:appUrl+"/tvserver/index.php/smartbox/services",
         dataType:"html",
         timeout:5000,
         success:function(data){
             $('#serviceContent').html(data);
         }
     });

});

this is the output from ajax into the page and i would like add event to the

li element

<div class="services-body">
    <ul id="services">
                            <li data-name="Lanudary" data-description="laudary services for customers" data-url="http://localhost/tvserver/uploads/default.png" data-id="1" data-payable="Y" data-cost="2.00">
                    <div>
                        <img src="http://localhost/tvserver/uploads/default">
                    </div>
                    <div class="services-names">
                       <span class="service-name">Lanudary</span>
                    </div>
                </li>
                            <li data-name="Gym" data-description="a place to train " data-url="http://localhost/tvserver/uploads/default.png" data-id="2" data-payable="N" data-cost="0.00">
                    <div>
                        <img src="http://localhost/tvserver/uploads/default">
                    </div>
                    <div class="services-names">
                       <span class="service-name">Gym</span>
                    </div>
                </li>
                <li data-name="Spa" data-description="Massaging of the body" data-url="http://localhost/tvserver/uploads/default" data-id="3" data-payable="Y" data-cost="5.00">
                    <div>
                        <img src="http://localhost/tvserver/uploads/default.png">
                    </div>
                    <div class="services-names">
                       <span class="service-name">Spa</span>
                    </div>
                </li>
                </ul>
</div>

thanks

Upvotes: 1

Views: 33

Answers (1)

Dusan Krstic
Dusan Krstic

Reputation: 705

This is a way to work this

function eventClick(obj){
        $(obj).on("click",function(){
            // some function
        });
    }
    $.ajax({
          url:appUrl+"/tvserver/index.php/smartbox/services",
          dataType:"html",
          timeout:5000,
          success:function(data){
                var d=$(data);
                d.find("#services li").each(function(){
                    eventClick(this);//add event lisener
                });
               $('#serviceContent').html(d);
            }
    });

Upvotes: 1

Related Questions