Why won't this method attach to an appended list item?

Question

I'm using a plugin to swipe delete rows from a list:

        $('#swipeMe li').swipeDelete();

        $('#swipeMe li').on('click', function(){
            $(this).trigger('swiperight')
        });

The swipeDelete functionality works fine when I write it with html:

<h2>Assets </h2>
<div id="Assets">
        <ul id="swipeMe">
            <li ><a href="#">This doesn't works</a></li>
            <li data-swipeurl="#"><a href="#">This works<</a></li>
            <li data-swipeurl="#"><a href="#">This works<</a></li>
            <li data-swipeurl="#"><a href="#">This works<</a></li>
            <li data-swipeurl="#"><a href="#">This works<</a></li>
            <li data-swipeurl="#"><a href="#">This works<</a></li>
            <li data-swipeurl="#"><a href="#">This works<</a></li>                
            <li >This doesn't</li>      
        </ul>
</div>

But it doesn't on new list items that I append:

$('.submitAsset').click(function(){
var asset = $('#asset_number').val();
$('<li data-swipeurl="#"><a href="#">' + asset + '</a></li>')
    .appendTo('#Assets #swipeMe').swipeDelete();
$('#assetForm').slideUp();    
});

Please help :/

Answer 1

$('<li data-swipeurl="#"><a href="#">' + asset + '</a></li>')
    .appendTo('#Assets #swipeMe').swipeDelete().on('click', function(){
            $(this).trigger('swiperight')
        });

this will work if swipeDelete() method supports chaining.

Give it a try.

Answer 2

The call to swipeDelete() that you have in the attach code should be fine. The only thing I can see wrong is that you also need to attach the click event handler. By changing the way it's assigned you can make it attach to elements that you add later on by code...

    $('#swipeMe').on('click', 'li', function(){
        $(this).trigger('swiperight')
    });

That will assign the click handler to all li elements in the element with id #swipeMe, whether they exist at the time that code runs or not.