如何在动态创建的函数调用中传递对象

时间:2013-09-28 23:06:04

标签: javascript jquery html ajax

我有一个jQuery click事件绑定到class =“thumnail”的缩略图:

$(".thumbnail").click(function(){
  var obj = new Object();
  obj.el = "imageEdit";
  obj.id = $(this).attr("id").replace("img_","");
  openDialogue(obj);
});

如你所见,我是:

  1. 制作一个对象“obj”,
  2. 调用函数“openDialogue”,
  3. 将我的对象“obj”传递给openDialogue。
  4. openDialogue将打开一个对话框,在对话框中我将进行ajax调用,检索图像路径,并用图像填充对话框。当缩略图加载到页面刷新时,这可以正常工作,作为表单操作页面,使用php。

    但我还需要在选择字段更改时使用js / jQuery填充缩略图框,我猜jQuery不会事件监听动态创建的元素,如按钮或锚点或图像(我是错了吗?)。

    当我使用选择框更改产品时,我将使用以下代码使用缩略图jpgs填充缩略图空格:

    $("#picture_row").empty();
    $.each( data, function( k ) {
      var id;
      $.each( data[k], function( kk,vv ){
        if(kk == "id"){ 
          id = vv;
          var e = $('<div class="thumbBox" id="imageBox_'+id+'"></div>');
          $('#picture_row').append(e);
        }
        else if(kk == "file_name"){ 
          var obj = new Object();
          obj.el = "imageEdit";
          obj.id = id;
    
          var file_name = vv.replace(".jpg","_thumb.jpg");
          var img = $("<img class='thumbnail' id='img_"+id+"' src='../images/products/thumbs/"+file_name+"' onclick='openDialogue("+obj+");return false;' />");
          $("#imageBox_"+id).append(img);
        }
      })
    });
    

    正如您所看到的,正是这些线条创建了新图像,并尝试添加onclick:

    var img = $("<img class='thumbnail' id='img_"+id+"' src='../images/products/thumbs/"+file_name+"' onclick='openDialogue("+obj+");return false;' />");
    $("#imageBox_"+id).append(img);
    

    由于某种原因,我无法将对象“obj”传递给动态创建函数调用:

    onclick='openDialogue("+obj+");return false;'
    

    我收到此错误:

    Timestamp: 9/28/2013 7:04:33 PM
    Error: SyntaxError: missing ] after element list
    Source File: (domain and path)/management/
    Line: 1, Column: 21
    Source Code:
    openDialogue([object Object]);return false;
    

1 个答案:

答案 0 :(得分:4)

而不是尝试内联事件处理使用jQuery .on()

var img = $("<img class='thumbnail' id='img_"+id+"' src='../images/products/thumbs/"+file_name+"' />")
.on('click', function(){
  openDialogue(obj);
  return false;
}) ;
$("#imageBox_"+id).append(img);