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

I have a jQuery click event bind to thumbnail images of the class="thumnail":

我有一个jQuery点击事件绑定到class =“thumnail”的缩略图：

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

As you can see, I am:

如你所见，我是：

1. making an object "obj",
2. 制作一个对象“obj”，
3. calling a function "openDialogue",
4. 调用函数“openDialogue”，
5. passing my object "obj" to openDialogue.
6. 将我的对象“obj”传递给openDialogue。

openDialogue will open a dialog box, and in the dialog box I am going to do an ajax call, retrieve the image path, and populate the dialog box with the image. This works fine when the thumbnail loads on a page refresh, as a form action page, using php.

openDialogue将打开一个对话框，在对话框中我将进行ajax调用，检索图像路径，并用图像填充对话框。当缩略图加载到页面刷新时，这可以正常工作，作为表单操作页面，使用php。

But I also need to populate the thumbnail boxes using js/jQuery, on a select field change, and I guess jQuery doesn't event listen to a dynamically created element, like a button or an anchor or an image (Am I wrong about this?).

但我还需要在选择字段更改时使用js / jQuery填充缩略图框，我猜jQuery没有事件监听动态创建的元素，如按钮或锚点或图像（我错了？）。

When I change the product using the select box, I will populate the thumbnail spaces with thumbnail jpgs using this code:

当我使用选择框更改产品时，我将使用以下代码使用缩略图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);
    }
  })
});

As you can see, it is these lines where I create the new image, and try to add an onclick:

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

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

For some reason, I can't pass my object "obj" to the dynamically creation function call:

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

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

I get this error:

我收到此错误：

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 个解决方案

#1

Instead of trying to inline the event handling use jQuery .on()

而不是尝试内联事件处理使用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);