使用jQuery将客户端事件绑定到动态数据列表项

Question

I got stuck in a problem. I am loading elements in a datalist dynamically. and i am trying to bind click event on a column using jquery. It works fine when i use master page with it. as it follows the page life cycle and loading jquery after child page data binding. But when i use it in a normal page(without master page) it does not allow me to perform desired action. I know why is this happening, the reason is jquery is being loaded before elements binding. so jquery is not able to bind click event since it is not able to find those controls.

binding elements already have "item" class in them

here is my jquery code:

$(document).ready(function () {
    $('.item').click(function () {
          //do something here
   });
});

code behind:

 protected void Page_Load(object sender, EventArgs e)
 {
     using (TestEntites db = new TestEntites())
    {
        IEnumerable<Template> Test = from t in db.Template
                                                    where t.Customer == clsuser.CustomerID
                                                        && t.Region == user.RegionID
                                                    select t;

        dlTemplateGroups.DataSource = Test;
        dlTemplateGroups.DataBind();

        BindTemplates(db);
    }     
 }

Answer 1

$(document).ready(function () {
    $('body').on('click', '.item' ,function () {
          //do something here
   });
});

$('body') make it more specific based on your html

Answer 2

I also had the same problem once and this problem really is a pain.

Here is my solution:

Instead of binding with click create a function for example:

function reBinding()
{
      $('.item').on("click",function () {
      //do something here
      });
}

and call this function after data binding is done. it will be good if you are using update panel.

ScriptManager.RegisterStartupScript(rptGridAlbum.GetType, "scriptname", "reBinding();", True)