Question

我创建了一个jquery插件，现在我想将它绑定到由php脚本创建的DOM元素。

使用以下标记作为示例：

<div class="showcase_window">

<div id='mywhatever'></div>
<div id='mywhatever2'></div>
<div id='mywhatever3'></div>

</div>

这有效：

$(document).ready(function(){

    $('#mywhatever').showcase();
    $('#mywhatever2').showcase();
    $('#mywhatever3').showcase();
});

但是由于标记是由php脚本创建的，我试图让这样的东西起作用：

 $(document).ready(function(){

    $('.showcase_window').children().on('showcase');

  });

但我有点困惑......我明白'on'用于附加事件，但我不知道如何去做...

非常感谢！

P.S。：这是插件：

 $.fn.showcase = function () {

     return this.each(function() {

      var $this = $(this);

      $this.find(".sc_itm_display").hover(function() {
            $this.find(".sc_img_front").stop(true,true).fadeOut("slow");
            }, function() {
        $this.find(".sc_img_front").stop(true,true).fadeIn("slow");
        });

    $this.find('.sc_color_select img').click(function() {

    var color_path_1 = $(this).attr("src").replace("color","1");
    var color_path_2 = $(this).attr("src").replace("color","2");

    $this.find('.sc_itm_display .sc_img_back img').attr("src",color_path_1);
    $this.find('.sc_itm_display .sc_img_front img').attr("src",color_path_2);

    });
    });
    };

Answer 1

on将处理程序附加到事件上。事件可以是用户操作或进程完成/失败等。

你没有附加一个事件而是一个函数，在这种情况下jQuery会为你做。

$('.showcase_window').children()或简称$('.showcase_window>div')包含脚本创建的三个示例div。

$('.showcase_window').children().showcase();（或更高效$('.showcase_window>div').showcase();）

将为每个div执行一次showcase()。 this中的showcase将成为div（'mywhatever'）本身。

Answer 2

如果您的PHP正在生成您想要操作的元素，请使用它来输出带有逗号分隔的id值字符串的脚本到目标。然后将这些目标用于您的插件。

PHP输出：

var target_ids = "#this, #that, #the_other";

你的jQuery中的

：

$(target_ids).showcase();

或者，使用一个唯一的类来标记您要定位的所有元素，并且您不需要知道它们的ID。

$(".mywhatevers").showcase();

Jquery插件 - 将其动态绑定到元素

2 个答案: