什麼是從我的插件HTML訪問jQuery插件方法的OO方法？

Question

我從這個問題開始：Multiple Javascript gadgets per page。關於如何建立一個jQuery插件，讀了之後，我已經通過我的包裹JS對象

(function {} { /*my object code*/ }(jQuery)) 

，並在我的對象添加

function createMyGadget() { return new myObject } 

修改了我的OO JavaScript對象爲jQuery插件。我現在可以成功通過做一個頁面上顯示兩個小玩意以下：

<div id="foo"></div> 
<div id="bar"></div> 

<script language="JavaScript"> 
    $("#foo").createMyGadget({ title: "My First Gadget"}); 
    $("#bar").createMyGadget({ title: "My Second Gadget"}); 
</script> 

由於createMyGadget()功能的一部分，我創建了一個新的div有一個唯一的ID（gadgetUID），寫一堆HTML，按鈕， imgs等，然後將該div附加到#foo和#bar。這很好。

在我的HTML中，我有一個「下一步」按鈕，需要調用在JavaScript對象中定義的goNext()函數。如何在該對象中引用該功能？我試過

onClick='$("#foo").goNext()' 

和

onClick='$("#gadgetUID").goNext()' 

和所有其他置換我能想到的。 Firebug總是迴應一個錯誤消息「...不是功能」。

附錄：這是我到johnnyheadphones響應：

我一直在試圖做同樣的事情，從jQuery的內部具有相同的結果，例如'...不是功能'。下面是實際的函數調用：

displayGadget : function() { 

    var myString = "\ 
    <div id=\""+this.gadgetId+"\" >\ 
     <div id=\"gadget_header\">\ 
      <h1 id=\"title\">"+this.options.title+"</h1>\ 
     </div>\ 
     <div id='loading' style=''><img src='images/loading2.gif' /></div> \ 
     <div id=\"gadget_body\"></div>\ 
     <div id=\"gadget_footer\">\ 
      <div id=\"searchAsset\">\ 
      </div>\ 
      <div id=\"pageControls\">\ 
       <img id=\"goPreviousIcon\" src=\"images/go-previous.png\">\ 
       <img id=\"goNextIcon\" src=\"images/go-next.png\">\ 
       <input type=\"button\" value=\"Next\" />\ 
      </div>\ 
     </div> \ 
    \ 
    </div>\ 
    <div id=\"debugInfo\"></div>\ 
      <script type=\"text/javascript\"> \ 
      </script>\ 
    "; 

    $("#"+this.gadgetContainerID).html(myString); 

    $('input[value="Next"]','#'+this.gadgetContainerID).click(function() { 
     $('#'+this.gadgetId).pageData(1); 
    }); 
} 

當我重新加載，然後點擊下一步按鈕，螢火蟲說「$（」＃「+ this.gadgetId）.pageData（1）是不是一個函數」。

順便說一句，我最初想用goNextIcon做到這一點，但將其更改爲一個按鈕，以便我可以複製/粘貼您的代碼。

我開始認爲我有其他錯誤，這只是一個奇怪的副產品。

附錄：我想出了問題：我是一個白癡（但我的任何一個xGFs都可以告訴你）。

我正在調用有關元素的pageData（）。元素上沒有pageData（）函數;它在'這個'對象上。 Onc我指出正確的（也是唯一的）pageData（）對象（連接到'this'），它的工作原理與廣告一樣。

現在去做一些代碼清理。

Answer 1

如果你正在寫的onclick處理程序作爲該被追加到DOM中的HTML的一部分，嘗試這樣的事情：

<input type="button" value="Next" onclick="function() { $('#gadgetUID').goNext(); }" /> 

或者，你可以使用jQuery插件代碼裏面的處理程序綁定。沒有看到代碼示例，很難準確地說出你需要什麼。但是，這是總體思路：

$('input[value="Next"]','#foo').click(function() { 
    $('#gadgetUID').goNext(); 
}); 

編輯： 聽起來這是一個範圍問題。在正確的範圍內調用pageData（）應該可以解決您的問題。也許像這樣的工作：

displayGadget : function() { 
    // encapsulate this in a closure, so pageData() is called on the instance 
    // of the object, not the DOM element selected by jQuery 
    var that = this; 

    [... string stuff here. you should replace 'this' with 'that' here as well ...] 

    $("#"+that.gadgetContainerID).html(myString); 

    $('#goNextIcon','#'+that.gadgetContainerID).click(function() { 
     that.pageData(1); 
    }); 
}, 

// the above code assumes that pageData() is part of the same 
// object instance as displayGadget. if not, then you'll have to 
// tweak your code to point call pageData in the correct scope 
pageData: function(page) { 
    // do stuff here! 
} 

注意，我改變了jQuery選擇回，使其與原始代碼（圖像標籤）。

如果您打算在頁面上使用此HTML的多個實例，您可能需要考慮的一件事是爲所生成的DOM元素使用類而不是ID。將相同的ID提供給多個DOM元素通常是一件壞事，並且可能會導致一些令人頭痛的問題和進一步的錯誤。

另外，您可能希望查看使用innerHTML生成控件的DOM節點創建。保持對元素的引用並將事件處理程序掛接到它們上會更容易。

Answer 2

也許這是你在想什麼......

onClick = function() { 
    $("#gadgetUID").goNext(); 
} 

這將創建到找到您的jQuery對象（S）對匿名函數的引用，並運行要運行的功能。