1

I'm very new to jquery / javascript. I have noticed that Function A that adds an item will work, but Function B stops working after Function A is called. I can get around this by re-including Function B in Function A but I find that to be inelegant. Surely, there is another way? I have already tried adding $document.ready(), but since this is included in that I'm guessing it's simply looping?

This is what I have so far:

<script type="text/javascript" charset="utf-8">
  $(document).ready( function () {

    //Function A
    $('a#create').click( function() {
      $("#existing").append('<option value="'+portName+'">'+portName+'</option>').multiselect("refresh");
      //multiselect is a plug-in that makes select option tags nicer to look at, on refresh the html is correctly parsed for Function B to continue working, however it does not work unless I re-call Function B here. Again calling $document.ready() here doesn't work either.
    });

    // Function B
    $('a.view').click( function() {
      alert();
    });
  });
</script>

I understand that Function B is calling on an anchor link, however Function A properly creates these conditions for Function B to work. On a normal document load this is not a problem. However after calling Function A, Function B THEN breaks unless I include Function B in Function A.

Should I be looking into creating a function that calls all other functions to "refresh" them? I'm not even sure what the problem is as of yet. I stumbled upon this "fix".

victoroux
  • 286
  • 2
  • 10
  • 3
    Read about "event delegation". – elclanrs Sep 05 '13 at 20:47
  • 1
    I did, I don't understand it. Should I be creating functions out of these and then on appending -- call the event delegation? – victoroux Sep 05 '13 at 20:48
  • 1
    See if this answer helps http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on – elclanrs Sep 05 '13 at 20:50
  • That is really helpful -- Basically, I'm assuming since I'm creating an item that on document ready were all "directly" given instructions, that I instead should be "delegating" those instructions to the parent container. Seriously helpful, because I could not figure that out at all. Thank you :) – victoroux Sep 05 '13 at 20:58

1 Answers1

2

I'm not sure if i've understood what you want to do, but I think what you are looking for is:

<script type="text/javascript" charset="utf-8">
  $(document).ready( function () {

    //Function A
    $('a#create').click( function() {

    });

    // Function B, event delegation
    $('body').on('click', 'a.view', function() {
      alert();
    });
  });
</script>
Holt
  • 36,600
  • 7
  • 92
  • 139
  • AKA - If I want both to keep working, I just create another $('body').on() for that as well? If so, then I guess all my click events should be written this way lol – victoroux Sep 05 '13 at 20:54
  • Actually when you do something like $(selector).on('event', function ()), it only applies to elements matching selector which are already in the DOM. If you want to add new element, with the same event, you have to do « event delegation » like in this example (you can use a more specified element instead of body to increase performance). In your case I think you have only one element matching a#create, and you won't create new element matching that, so your code for function A is ok. – Holt Sep 05 '13 at 20:59
  • Yeah, I figured out why you were right -- Still have to wait a minute to give you the check mark though -- Sorry. – victoroux Sep 05 '13 at 21:00