Rerun .js-File in Chrome inspector or Firebug?

Question

During website development:

Before closing the html/body, I include a call to a .js-File, to do some DOM-manipulating via Javascript/jquery (e.g. $('#foo a').addClass('bar'); etc., the usual).

I open the file in the browser, then F12-inspect the code and then -- developing -- try out "this and that" by directly manipulating the HTML in the console. Of course, the jquery does not work on those freshly manipulated elements, because it has already been fired and is through. Is there any way I can tell the Chrome (or the Firebug) inspector to re-run that .js-File just to see how it would work on the changed elements of the HTML-document?

Thanks in advance...

Answer 1

Both, Firebug and the Chrome DevTools have a Console panel with a command line in it. This command line allows you to execute the same JavaScript for these newly added elements.

Another approach would be to use jQuery's .on() method for automatic event binding of elements when the HTML structure is changed as described in another answer. This would then e.g. look like:

$(document.body).on('change', '#foo a', function() {
    $(this).addClass('bar');
});