Question

我正在使用photopretty库插件在网站上工作，当我点击图片时，它会添加模板代码以显示图像作为弹出窗口进入我身边并在我关闭时将其完全删除。但我需要在该特定图像的prettypphoto efect模板弹出窗口中添加一些元素。所以我使用jquery在另一个脚本main.js上工作，以选择该模板中的名称，但它不起作用。

我的意思是当我点击图片时模板代码开始添加到我的身边，所以我使用点击选择它的元素。那有意义吗？如果我错了，请纠正我。我无法修改插件文件。

 main.js
 jQuery( document ).ready(function() {
     jQuery('.contact_plan img').click(function(){
        var element = jQuery('.element');
        jQuery('.element').detach();
        jQuery('.pp_content_container').append(element);
     }); 

 });


 The prettyphoto template look like this
 <div class="pp_pic_holder pp_default">
 <div class="pp_top">...</div>
 <div class="pp_content_container">..</div>
 ....

Answer 1

你不应该使用

jQuery('.pp_content_container').append(element);
 });

append将参数附加到您正在处理的对象上。

appendTo将您正在处理的对象追加到参数。

您正在做的是将$('.pp_content_container')元素添加到新元素中，而您在页面的任何位置都没有添加（在给定代码中）。

Answer 2

这是一个可用于检查元素何时存在的函数：

;(function ($, window) {

var intervals = {}; 
var removeListener = function(selector) {

if (intervals[selector]) {

    window.clearInterval(intervals[selector]);
    intervals[selector] = null;
}
};
var found = 'waitUntilExists.found';


$.fn.waitUntilExists = function(handler, shouldRunHandlerOnce, isChild) {

    var selector = this.selector;
    var $this = $(selector);
    var $elements = $this.not(function() { return $(this).data(found); });

    if (handler === 'remove') {

        // Hijack and remove interval immediately if the code requests
        removeListener(selector);
    }
    else {

        // Run the handler on all found elements and mark as found
        $elements.each(handler).data(found, true);

        if (shouldRunHandlerOnce && $this.length) {

            // Element was found, implying the handler already ran for all 
            // matched elements
            removeListener(selector);
        }
        else if (!isChild) {

            // If this is a recurring search or if the target has not yet been 
            // found, create an interval to continue searching for the target
            intervals[selector] = window.setInterval(function () {

                $this.waitUntilExists(handler, shouldRunHandlerOnce, true);
            }, 500);
    }
}

return $this;
};

}(jQuery, window));

你可以像这样使用它：

$(selector).waitUntilExists(function);

在您的情况下，您可以尝试：

jQuery('.contact_plan img').click(function(){
    var element = jQuery('.element');
    jQuery('.element').detach();
    $('.pp_content_container').waitUntilExists(function(){
        jQuery('.pp_content_container').append(element);
    });
});

相机效果上的Jquery选择器

2 个答案: