-2

How do I modify the following 3 lines of code so that they use $(document) ?

    $('.navbar li ul').slideToggle(300);

and

    $('.navbar > li:first-child > span').text("Category");

and

    if (!container.is(e.target)

example of usage of document:

    document.getElementById("input1").focus();

and

    $(document).on('click', '.navbar ul span', function(event) {    
    });

and

    $(document).mouseup(function (e) { 
    });

etc...

m0a
  • 1,005
  • 2
  • 15
  • 29
  • Do you mind adding complete code, instead of chunks. Also, add minimal HTML – Tushar Sep 04 '15 at 03:43
  • 1
    What do you mean "so that they use `$(document)`"? All your jQuery selectors already search the document. `document.getElementById("input1")` is equivalent to `$("#input1")` in jQuery. – jfriend00 Sep 04 '15 at 03:45
  • so that it starts with $(document) because, for instance, " $('.navbar li ul').slideToggle(300);" does not start with document. – m0a Sep 04 '15 at 03:46
  • Why do you want it to start with `$(document)`? That makes no sense. You start a selector with what it needs to start with in order to find the elements you are looking for. In jQuery, all selectors that do not specifically specify a context already search the whole document. – jfriend00 Sep 04 '15 at 03:46
  • @matthew What is expected result ? – guest271314 Sep 04 '15 at 03:47
  • I'm loading these through AJAX so I have to modify the code to search the document every time, or else the code doesn't work. I've already made a few modifications to use "document" with success, so I'm trying to keep it up.... – m0a Sep 04 '15 at 03:48

1 Answers1

2

It appears you're a bit confused about jQuery selectors.

 $('.navbar li ul').slideToggle(300);

already searches the whole document. If you omit the second parameter to a jQuery object, it is implicitly the document. So, the selector above is equivalent to this:

 $('.navbar li ul', document).slideToggle(300);

Leaving out the document as the 2nd argument is a shortcut. If it is not present, it is assumed by default by the jQuery library.

Something like this:

document.getElementById("input1")

is a plain Javascript statement - no jQuery, no CSS selectors. It's another way to find an element by id and is roughly equivalent to the jQuery statement:

$("#input1")

or the plain Javascript:

document.querySelector("#input1");

From your comments, it appears that maybe what you're asking is how to use delegated event handling so that your queries will work with dynamically created elements. If that's the case, you should edit your question to actually say that. In the future, please describe the problem you are trying to solve, NOT your attempted solution. Then, we can help you more fully.

If that's the case, then you can use this, then delegated event handling only applies to event handlers, it does not apply to one time command like:

$('.navbar li ul').slideToggle(300);

That will work on whatever elements are present the moment you run it and there is no document equivalent or any way to make this work better or worse for dynamic elements. It works one whatever elements are present at the moment you call it because it's not an event handler installation for future events. It's an action you do at this particular moment so it can only work on the elements that are currently present.

You may find these other answers useful to learn more about these issues:

Should all jquery events be bound to $(document)?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

JQuery Event Handlers - What's the "Best" method

Does jQuery.on() work for elements that are added after the event handler is created?

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 1
    Thank you. I've learned a few things from your post. Yes, delegated event handling is what I'm trying to do. Do you have any extra advice for that? edit: Read your edits now addressing this topic. Thank you! – m0a Sep 04 '15 at 03:54
  • 1
    @matthew - delegated event handling applies only to event handlers, not to the first four code blocks in your question as those are operations on elements that are currently present and don't have anything to do with event handling and thus don't have anything to do with delegated event handling either. See the references I added to the end of my answer. – jfriend00 Sep 04 '15 at 03:57
  • @jfriend00 Much appreciated! – m0a Sep 04 '15 at 04:01