Question

I get some bug trying to manage table data (with the available languages). Here is what I have:

HTML:

<input type="button" id="add_language" value="Add Language" />
    <table>
        <tbody id="languages">
                                            <tr>
                            <td><div class="input text"><input type="text" id="Setting3Value3Language" rel="" value="English" name="data[Setting][3][value][3][language]"/></div></td>
                            <td><div class="input text"><input type="text" id="Setting3Value3Alias" rel="" value="eng" name="data[Setting][3][value][3][alias]"/></div></td>
                            <td/>
                            <td><button class="delete-lang">Delete</button></td>
                        </tr>
        </tbody>
    </table>

And jQuery:

$("#add_language").click(function(){
    var langId = langId + 1;
    var row ='<tr><td><div class="input text"><input type="text" id="Setting3Value'+langId+'Language" rel="" value="" name="data[Setting][3][value]['+langId+'][language]"/></div></td><td><div class="input text"><input type="text" id="Setting3Value'+langId+'Alias" rel="" value="" name="data[Setting][3][value]['+langId+'][alias]"/></div></td><td></td><td><button class="delete-lang ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Delete"><span class="ui-button-icon-primary ui-icon ui-icon-trash"/><span class="ui-button-text">Delete</span></button></td></tr>';
    $('#languages').append(row);
     return false;
});

$( ".delete-lang" ).button({
            icons: {
                primary: "ui-icon-trash"
            },
            text: false
        });

$( ".delete-lang" ).click(function(event){
    event.preventDefault();
    $(this).parents('tr').first().remove();
});

For the moment it is working except that for the delete button – when deleting a row that just has been inserted I get the form submited, it does not run event.preventDefault(); for the newly added row and submits the form. How to fix this?

Also I should add some kind of sorting the rows but also sorting them the name value inside the inputs should change. How to make the sortable event to change the input names?

I am not sure that this is the best way for managing the data inside a table but if there is better and easy one – please suggest.

Answer 1

For rows that are added dynamically (ie. not available to the DOM on page load) you need to delegate the events to a static parent element. If you’re using jQuery 1.6 or older, you use delegate(), 1.7 or newer, you use on().

Try this:

$("#languages").delegate(".delete-lang", "click", function(event) {
    event.preventDefault();
    $(this).parents('tr').first().remove();
});

or in jQ1.7:

$("#languages").on("click", ".delete-lang", function(event) { 
    // rest of your code....

This is assuming that the tbody#languages element in your code is not appended via jQuery. If it is, try a different selector.