如何为动态生成的按钮设置click事件

时间:2012-04-09 07:14:48

标签: jquery

我是jquery的新手。我想生成一组图像按钮,所以我这样做了

  <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

  <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>

提前致谢

2 个答案:

答案 0 :(得分:0)

尝试.live()

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

答案 1 :(得分:0)

使用唯一的类名

创建图像
<img class="imgCollapse" id="imgCollapse'+TaskDataObj[i].TaskId+'".......

然后绑定该img类的实时点击事件

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