我必須開發一個非常大的平臺,我需要一些插件的一些改進。jquery沒有找到動態dom父
基本上,我有使用Smarty的發動機(沒關係這)一個模板,我有這樣的代碼在模板:
<div class="imageLoader">
<div id="main_picture" data-instance="article" data-location="{$smarty.session.CONFIG.DIR.C_PHOTOS_DIR}">
{if $data.main_picture}
<input type='hidden' name='main_picture' value="{$data.main_picture}" />
<img src="{$smarty.session.CONFIG.DIR.C_PHOTOS_DIR}{$data.main_picture}" />
<span class="NTPDelete" onclick="javascript: ntpDeleteImage(this);">
{$smarty.session.language.ntp.delete}
</span>
{else}
<span class="NTPOpenLoader" onclick='javascript: ntpOpenLoader(this);'>
{$smarty.session.language.ntp.add}
</span>
{/if}
</div>
</div>
我也有一個js腳本,它包含以下代碼:
function ntpDeleteImage(elem) {
var parent = $(elem).parent();
var szInstanceName = $(parent).attr('data-instance');
var params = {
'filename' : encodeURI($(parent).find('input').val()),
'instance': szInstanceName
};
$.post("./ajax/ntp.delete.php", params, function(data){
})
.done(function(data){
$(parent).find('img, span').remove();
$(parent).find('input').val('');
$("<span />", {
class: 'NTPOpenLoader'
}).html(ntpAddPictureText).appendTo(parent);
$(parent).on('click', 'span.NTPOpenLoader', function(){
ntpOpenLoader(elem);
});
});
}
function ntpOpenLoader(elem){
var parent = $(elem).parent();
var szInstanceName = $(parent).attr('data-instance');
console.log(parent);
window.open("ntp.loader.php?id=" + parent[0].id + "&instance=" + szInstanceName, "_blank", "width=400,height=170,top="+event.clientY+",left="+(event.clientX-150));
}
方法ntpOpenLoader()
有兩個上下文:第一種是方法ntpDeleteImage,第二個是直接從模板代碼(見上文模板代碼)。
當我直接從模板代碼運行ntpOpenLoader()
時,它工作正常。 當我從ntpDeleteImage()
上下文運行ntpOpenLoader()
時,我的span dom沒有看到父節點。其實,我不認爲我的跨度(與NTPOpenLoader類)正確檢索父。
從Chrome中調試這個我在控制檯如下:
在(模板上下文)控制檯的回報。 [DIV#main_picture,prevObject:n.fn.init [1],上下文:span.NTPOpenLoader]
在從ntpDeleteImage運行的上下文我有: [prevObject:n.fn.init [1],上下文:span.NTPOpenLoader]
這意味着我有一個對象而不父。 請幫我找到我的錯誤,並糾正我在哪裏我錯了。
我忘了提及Chrome拋出此錯誤:Uncaught TypeError:無法讀取未定義的屬性'id'。這出現在ntpOpenLoader()方法的第6行,在那裏我有parent [0] .id。相同的代碼在模板上下文中工作正常 –