How to apply jquery effect to element created by Knockout.js

Question

Hello I have the following code in my view:

        <div data-bind="foreach: Elements">
            <div data-bind="attr:{id: id}">
                <img data-bind="attr:{src: ImageSource}" />
                <p data-bind="text: Name"></p>
            </div>
        </div>

But for each new element I want to add the jQuery effet like:

        $("#draggable").draggable();

Is there any way to subsribe to event that occures after element added to this list?

Answer 1

The best way to do this is to use custom bindings.

ko.bindingHandlers.draggable= {
    init: function(element, valueAccessor) {
        $(element).draggable();
    }
};

    <div data-bind="foreach: Elements">
        <div data-bind="attr:{id: id}, draggable: {}">
            <img data-bind="attr:{src: ImageSource}" />
            <p data-bind="text: Name"></p>
        </div>
    </div>

Read more about it in the documentation: http://knockoutjs.com/documentation/custom-bindings.html.