Rewriting A Part of My Code

Question

I'm trying to come up with a better way of accomplishing a task. I have about 30 different data tables. One for each module and they ALL share a button with a class of edit. The edit button takes the id of the button which is the DB id row and takes it to the module's edit form page. So keeping all of this in mind to prevent bubbling and all other else. Does anyone know a better way to write this.

This is just an example of how one is written.

$('.edit').live('click', function(e) {
    e.preventDefault();
    var templateID = $(this).attr('id');
    if(!$('div.right_content').hasClass("loading")){
        $('div.right_content').addClass("loading").load('modules/forms/edit/templates.php?templateID=' + templateID, 
        function() {
            $(this).removeClass("loading");
        });
    }
});

EDIT:

  <table id="templatesPageList" class="rounded-corner dataTablePageList">
    <thead>
      <tr>
        <th scope="col" class=""></th>
        <th scope="col" class="">ID</th>
        <th scope="col" class="">Description</th>
        <th scope="col" class="">Edit</th>
        <th scope="col" class="">Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="templates" value="1" /></td>
        <td>1</td>
        <td>Main Site Template</td>
        <td><a href="#"><img src=
        "http://www.kansasoutlawwrestling.com/manager/images/user_edit.png" class="edit"
        alt="" title="" border="0" id="1" name="1" /></a></td>
        <td><a href="#" class="ask"><img src=
        "http://www.kansasoutlawwrestling.com/manager/images/trash.png" class="delete"
        alt="" title="" border="0" id="1" name="1" /></a></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="templates" value="2" /></td>
        <td>2</td>
        <td>Event Page</td>
        <td><a href="#"><img src=
        "http://www.kansasoutlawwrestling.com/manager/images/user_edit.png" class="edit"
        alt="" title="" border="0" id="2" name="2" /></a></td>
        <td><a href="#" class="ask"><img src=
        "http://www.kansasoutlawwrestling.com/manager/images/trash.png" class="delete"
        alt="" title="" border="0" id="2" name="2" /></a></td>
      </tr>
    </tbody>
  </table>

Reason I'm asking to find another route for this is because its causing more problems then what its worth. So seeing if there's any alternative methods. — Jeff Davidson, Aug 02 '11 at 04:27
What problems? You didn't mention any problems specifically in your OP. — Sparky, Aug 02 '11 at 04:32
I know. I just didn't like the way it is written and was hoping I could have some possible alterior methods. — Jeff Davidson, Aug 02 '11 at 04:34

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

Your code looks fine; if you want to improve performance, you can use .delegate() instead of .live(). In general, you should always use .delegate() over .live().

$('tr').delegate('.edit', function(e) {...});

Refer to this thread for specifics on the performance improvements: Jquery live() vs delegate()

edited May 23 '17 at 12:19

Community

1
1

answered Aug 02 '11 at 05:38

rkw

7,287
4
26
39

Thank you, however, why are you using the row as the selector? – Jeff Davidson Aug 02 '11 at 18:17
This is to both limit how far the event has to bubble up (stops at 'tr' instead of 'document') and allows you to catch all the click events with one click bind instead of two by changing '.edit' to 'a'. Check out this article for more details: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ – rkw Aug 02 '11 at 19:09

Rewriting A Part of My Code

1 Answers1