jquery从插件分配点击功能

Question

这是一个我正在更新的旧项目，所以不是最漂亮的编码。

我正在尝试根据我的特定需求调整插件，有问题的插件是一个简单的可折叠面板插件。

我希望能够根据分配给 div 的 rel 为每个面板设置不同颜色的样式。

它实际上是生成css和div代码的php代码，然后我调用jquery来应用可折叠面板插件。

它的样式一切正常，但点击功能不起作用，任何指针都会最有帮助：我想我需要在某处应用 .delegate() 但不知道如何。

网址：http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_rework.php 要获得测试结果：单击选择自治市镇选择器上方的[选择全部]，然后单击搜索按钮。

创建面板的代码：

//all this is wrapped in a php loop:
<style type="text/css">
            .C_<?php echo $myCurrentBorough ?>_color{
               color:<?php echo $row_rs_myBoroughs['color']; ?>;
               font-family: Arial, Helvetica, sans-serif;
               font-size:12px;
               letter-spacing:1px;
               text-transform:uppercase; 
               font-weight: bold;   
            }
            .collapsibleContainer<?php echo $myCurrentBorough ?>{
                     border: solid 0px <?php echo $row_rs_myBoroughs['color']; ?>;
                }

                .collapsibleContainerTitle<?php echo $myCurrentBorough ?>{
                     cursor:pointer;
                     color:#000000;
                     background-color:<?php echo $row_rs_myBoroughs['color']; ?>
                }

                .collapsibleContainerTitle div<?php echo $myCurrentBorough ?>{
                     padding-top:5px;
                     padding-left:10px;
                     background-color:<?php echo $row_rs_myBoroughs['color']; ?>;
                     color:#607882;
                }

                .collapsibleContainerContent<?php echo $myCurrentBorough ?>{
                     padding: 10px;
                     background-color:<?php echo $row_rs_myBoroughs['color']; ?>;
                }

         </style>
        <?php if($boroughCounter > 0){?>

             <div class="collapsibleContainer<?php echo $myCurrentBorough; ?>" tabindex="<?php echo $myCurrentBorough; ?>" title="Locations Found In <?php echo $row_rs_myBoroughs['Borough_Name']; ?>" rel="<?php echo $myCurrentBorough; ?>">
            MY DIV CONTENT GOES HERE
               </div>
               <script type="text/javascript">
                        $(document).ready(function() {
                            $(".collapsibleContainer<?php echo $myCurrentBorough; ?>").collapsiblePanel();
                        });
                    </script>
                    <?php } //end check to see if locations exist in borough?>

jquery 插件：

    (function($) {
    $.fn.extend({
        collapsiblePanel: function() {
            // Call the ConfigureCollapsiblePanel function for the selected element
            return $(this).each(ConfigureCollapsiblePanel);
        }
    });

})(jQuery);

function ConfigureCollapsiblePanel() {
    $(this).addClass("ui-widget");
    // Wrap the contents of the container within a new div.
    $(this).children().wrapAll("<div class='collapsibleContainerContent"+$(this).attr("rel")+" ui-widget-content' rel='"+$(this).attr("rel")+"'></div>");

    // Create a new div as the first item within the container.  Put the title of the panel in here.
    $("<div class='collapsibleContainerTitle"+$(this).attr("rel")+" ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));

    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
    $(".collapsibleContainerTitle"+$(this).attr("rel")+"", this).click(CollapsibleContainerTitleOnClick());
}

function CollapsibleContainerTitleOnClick(myID) {
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
    $(".collapsibleContainerContent"+$(this).attr("rel")+"", $(this).parent()).slideToggle();
}

Answer 1

click 方法正在调用函数，而不是传递对函数的引用。去掉()，事件就会触发。

当前代码： $(".collapsibleContainerTitle"+$(this).attr("rel")+"", this).click(CollapsibleContainerTitleOnClick());

固定代码： $(".collapsibleContainerTitle"+$(this).attr("rel")+"", this).click(CollapsibleContainerTitleOnClick);