Каков подход OO к доступу к методам плагина jQuery из моего плагина HTML?

Question

Я начал с этого вопроса: Несколько гаджетов JavaScript на страницу Анкет После прочтения о том, как построить плагин jQuery, я изменил свой объект oo javascript в плагин jQuery, завернув свой объект JS в

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

и добавление

function createMyGadget() { return new myObject }

в моем объекте. Теперь я могу успешно отобразить два гаджета на одной странице, выполнив следующее:

<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 с уникальным идентификатором (gadgetUID), напишите кучу HTML, кнопок, IMG и т. Д. #foo а также #bar. Анкет Это работает хорошо.

В моем HTML у меня есть кнопка «следующая», которая должна вызвать goNext() функция, которая определена в объекте JavaScript. Как мне ссылаться на эту функцию в этом объекте? я пытался

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

а также

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

и любая другая перестановка, о которой я мог подумать. Firebug всегда отвечает сообщением об ошибке «... не функцией».

Приложение: Вот мой ответ на JohnnyheadPhone:

Я пытался сделать то же самое изнутри 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);
    });
}

Когда я перезагружаю и нажимаю кнопку «Следующая», Firebug говорит «$ ('#'+this.gadgetid) .pagedata (1) не является функцией».

Кстати, я изначально хотел сделать это с Gokexticon, но изменил его на кнопку, чтобы я мог скопировать/вставить ваш код.

Я начинаю думать, что у меня что-то еще не так, и это просто странный побочный продукт.

Приложение: Я понял проблему: я идиот (но любой из моих XGF мог бы вам это сказать).

Я называл Pagegatata () на рассматриваемый элемент. На элементе нет функции Pagegatata (); Это на объекте «этот». Я указал на правильный (и единственный) объект Pagegatata () (который прикреплен к «этому»), он работал, как рекламируется.

Теперь, чтобы сделать очистку кода.

Answer 1

Если вы пишете обработчик Onclick как часть HTML, который добавляется к DOM, попробуйте что -то подобное:

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

Или вы можете использовать jQuery, чтобы связать обработчик внутри кода плагина. Не видя образец кода, трудно сказать именно то, что вам нужно. Но это общая идея:

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

РЕДАКТИРОВАТЬ: Похоже, это проблема общего пользования. Вызов Pagegatata () в правильной области должен решить вашу проблему. Может быть, что -то подобное сработает:

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. Предоставление такого же идентификатора более чем одному элементу DOM, как правило, является плохой вещью и может вызвать у вас некоторые головные боли и ошибки дальше в будущем.

Кроме того, вы можете захотеть изучить создание узлов DOM, вместо этого используя innerhtml для генерации элементов управления. Было бы легче сохранить на них ссылки на элементы и обработчики событий.

Answer 2

Возможно, это то, о чем вы думаете ...

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

Это создает ссылку на анонимную функцию, которая находит ваш объект (ы) JQuery и запускает функцию, которую вы хотите запустить.