2013-09-28 43 views
4

我有一個jQuery的單擊事件綁定到類=「略圖」的縮略圖:如何傳遞對象的動態創建函數調用

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

正如你所看到的,我:

  1. 製造物體的 「目標文件」,
  2. 調用函數 「openDialogue」
  3. 通過我的目標 「目標文件」 到openDialogue。

openDialogue將打開一個對話框,並在對話框中打開ajax調用,檢索圖像路徑,然後用圖像填充對話框。當縮略圖在頁面上加載時,使用php作爲表單操作頁面刷新時,這工作正常。

但我還需要使用js/jQuery填充縮略圖框,對選擇字段進行更改,並且我猜jQuery不會事件偵聽動態創建的元素,如按鈕或錨點或圖像(Am我錯了嗎?)。

當我使用選擇框更改產品,我會填充縮略圖空間使用此代碼縮略圖JPG格式:

$("#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); 

出於某種原因,我無法將對象「目標文件」傳遞給動態創建函數調用:

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; 
+0

提示:http://jsbeautifier.org/ – elclanrs

+1

順便說一句,是你錯了關於jQuery甚至沒有考慮動態創建的元素。它使用事件冒泡來監聽在綁定處理程序時不存在的元素上觸發的事件。使用它是這樣做的:'$('#parentElement')。on('click','#button',function(jqEvt){/ * do something!* /});' – Kiruse

回答

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); 
+0

...,關!綠色檢查您的答案,只要SO允許我這樣做。謝謝穆薩。 P.S .:我做了一個小小的編輯,我做了一個'.on('click',function(){'而不是'on'('click',function(){' – TARKUS

相關問題