how to set the click event for dynamic generated button

Question

I am new to jquery. I wanted to generated a set of image button so i have done like this



  <script type="text/javascript">
$(document).ready(function(){
     $.support.cors = true;  
    if ($('#ulTask li').length == 0)
    {
        $.ajax({
            type: "POST",
            url: "http://diana/TaskManagerWebService/TaskManagerService.asmx/SelectAllTasks",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError
        });
        function OnSuccess(TaskData){        
            var TaskDataObj = jQuery.parseJSON(TaskData.d);                
            $.each(TaskDataObj, function (i, v) {
               var TaskTypeUrl = getTaskTypeImageURL(TaskDataObj[i].TaskType), TaskId = parseInt(TaskDataObj[i].TaskId);
              $("#ulTask").append('<li id="liTask'+TaskDataObj[i].TaskId+'"><div id="divTask'+TaskDataObj[i].TaskId+'"><img id="imgCollapse'+TaskDataObj[i].TaskId+'" alt="' + TaskDataObj[i].TaskId + '" src="Images/story_collapsed1.png" onclick="javascript:FillTaskDetails('+TaskDataObj[i].TaskId+');"/>' + TaskDataObj[i].TaskName + '</div></li>');
            });
        }
        function OnError(request, status, error){                
            alert(request.statusText);
        }
    }
});
</script>


for the image which i binded in li tag have onclick event.

onclick="javascript:FillTaskDetails('+TaskDataObj[i].TaskId+');"


I wanted to assign that click event in query formate like

$("#imageId").click(function(){
});


how to i get this "imageId", Actually this imageid is combination of text and dynamic value

<img id="imgCollapse'+TaskDataObj[i].TaskId+'".......

Thanks in advance

JS Mitrah · Accepted Answer · 2012-04-09 07:46:31Z

1

Create the image those images with an unique class name

<img class="imgCollapse" id="imgCollapse'+TaskDataObj[i].TaskId+'".......

Then bind a live click event for that img class

$(".imgCollapse").live("click",function(event){
    event.preventDefault();
    taskID = $(this).attr('id').replace('imgCollapse','');
    //console.log(taskID);
    FillTaskDetails(taskID);
 });

answered Apr 9, 2012 at 7:46

JS Mitrah

6866 silver badges12 bronze badges

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

1 Comment

JS Mitrah Over a year ago

ID of an element should be unique for a web page. If you have multiple elements with ID, jQuery Id selector only select only first element, not all elements.

Selçuk · Accepted Answer · 2012-04-09 07:18:34Z

0

try .live()

$("#imageId").live("click",function(){
    // Code is here ...
});

answered Apr 9, 2012 at 7:18

Selçuk

1761 silver badge10 bronze badges

Collectives™ on Stack Overflow

how to set the click event for dynamic generated button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related