Добавить функцию jQuery для определенных элементов

Question

Я знаю, что вы можете добавлять новые функции jQuery с помощью $.fn.someFunction = function()

Однако я хочу добавлять функции только к определенным элементам.Я попробовал этот синтаксис, и он не работает $('.someElements').fn.someFunction = function()

Я хочу сделать это, чтобы я мог вызвать функцию, как это где-то в коде $('someElements').someFunction();

Answer 1

Использование .bind() и .trigger()

$('button').bind('someFunction',function() {
    alert('go away!')
});


$('button').click(function(){
    $(this).trigger('someFunction');
});

Начиная с jQuery 1.7, .on () метод является предпочтительным методом для прикрепления обработчиков событий к документу.

Answer 2

лет можно сделать с помощью этого:

$.fn.testFn = function(){
    this.each(function(){
        var className = $(this).attr('class');
        $(this).html(className);
    });    
};

$('li').testFn(); //or any element you want

Тест: http://jsfiddle.net/DarkThrone/nUzJN/

Answer 3

Йо, нужно было сделать то же самое, придумал это. это хорошо, потому что вы уничтожаете элемент, а функция выходит из строя! Я думаю ...

var snippet=jQuery(".myElement");
snippet.data('destructor', function(){
    //do something
});
snippet.data('destructor')();

Answer 4

Если вы хотите использовать эту функцию только для определенных селекторов, вам подойдет следующее. У меня только что был сценарий, где я нуждался в этом, и он прекрасно работает.

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
    };
})

потом вы можете сделать

$('.my-selector').getUrl()

без необходимости определять его как плагин или использовать данные или события bind / on / trigger.

Очевидно, что вы можете изменить функцию, чтобы она возвращала содержащий объект, если вы хотите использовать его в цепочке, возвращая this

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
        return this;
    };
})

Answer 5

@ Ответ Райгеля великолепен!Однако вы также можете использовать синтаксис $.fn и позволить своей функции обрабатывать только определенные элементы:

$.fn.someFunction = function(){
    this.each(function(){
        // only handle "someElement"
        if (false == $(this).hasClass("someElement")) {
            return; // do nothing
        }

        $(this).append(" some element has been modified");

        return $(this); // support chaining
    });    
};

// now you can call your function like this
$('.someElement').someFunction();            

См. Рабочий jsfiddle: http://jsfiddle.net/AKnKj/3/

Answer 6

У меня действительно был этот вариант использования, но с кэшированным объектом.Таким образом, у меня уже был объект jQuery, меню с возможностью переключения, и я хотел прикрепить к этому объекту две функции: «открыть» и «закрыть».Функции, необходимые для сохранения области действия самого элемента, вот и все, поэтому я хотел, чтобы this был объектом меню.В любом случае, вы можете просто добавлять функции и переменные, как и любой другой объект javascript.Иногда я забываю это.

var $menu = $('#menu');
$menu.open = function(){
   this.css('left', 0);
   this.is_open = true; // you can also set arbitrary values on the object
};
$menu.close = function(){
   this.css('left', '-100%');
   this.is_open = false;
};

$menu.close();

Answer 7

Наиболее очевидным решением является назначение функции в качестве свойства объекта:

obj.prop("myFunc", function() {
  return (function(arg) {
    alert("It works! " + arg);
  });
});

Затем вызовите ее для объекта следующим образом:

obj.prop("myFunc")("Cool!");

Примечание: ваша функция являетсявозвращаемое значение внешнего, см .: http://api.jquery.com/prop/#prop-propertyName-function

Answer 8

Я также не уверен с моим ответом, поможет ли это вам, но просто попробую, как насчет использования .live?

$(selector).live(click,function(){
    //some codes here
});

Answer 9

Я сделал это, и он работает нормально ..

 function do_write(){
     $("#script").append("<script> $(\'#t"+(id_app+4)+"\').change(function(){  alert('Write Your Code here');    });<\/script>");
     console.log("<script> $(\'#t"+(id_app+4)+"\').change(function(){  alert('hello');    });<\/script>");
}

и вызов функции из вашей динамической функции, которая создает динамический элемент управления в html