PHP / jQuery reloading the DOM

Question

New and trying to learn.

I have a table of account names on the left of a page. When I click on one of those account names, the associated fields are displayed in a form. I can then update any field and click "Update" to update the underlying SQL data.

I also have a text field and a button to add another account. This simply adds a new record with the account name as the only filled field. Now I would like to be able to click on that account in the table mentioned above and then update the info for the new account. However, clicking on the accounts in the table no longer results in their fields being displayed in the form.

To add the account, I do a post to a PHP page and then load the HTML created by that page into the div containing the table. So far so good.

 $("button#new").click (function (){
     company = $("input#newaccount").val();

     $.post ('db_addaccount.php',
     {'company':company},showaccounts)
      return;
  }) 

  function showaccounts(data){
     $('div#table').html(data)
  }

However, I'm aware that this newly loaded HTML breaks the DOM and I can no longer expect to click on a row in the table and reflect the fields in my form.

I'm aware of the .on function but can't figure out if/how to use it in this particular situation.

Any suggestions would be appreciated.

adeneo · Accepted Answer · 2012-12-07 04:45:40Z

1

Hopefully you're using classes for multiple elements such as each account, and not the same ID etc. You need to use on() as a delegated event handler, and in the below example tableID would be the ID of your table (which is not dynamic?) and .accounts would be each account (which are dynamically inserted with the $.post function) :

$('#tableID').on('click', '.accounts', function() {
    //do stuff
});

answered Dec 7, 2012 at 4:45

adeneo

319k29 gold badges409 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

delpi767 Over a year ago

Yes, I am using classes and I think you for your suggestion. My problem was that I was using .on on the wrong event (IE the event adding a new account rather than the table I wanted to display.

Collectives™ on Stack Overflow

PHP / jQuery reloading the DOM

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related