0

Possible Duplicate:
jQuery bind click ANYTHING but ELEMENT

I have this HTML

<div id="outer">
  <input id="input1" type="text" value="button1"/>
  <input id="input2" type="text" value="button2"/>
</div>

And I am trying to use this

var insideOuter = "";

jQuery('#outer').live('click', function (e) {
    if(insideOuter != "" && insideOuter != 'outer'){
        alert('Inside');
    }
    insideOuter = "outer";
    return false;
});

jQuery('body').live('click', function (e) {
    if(insideOuter != ""&& insideOuter != 'body'){
        alert('Outside');
    }
    insideOuter = "body";
    return false;
});

Basically, I am trying to

  1. If user clicks inside id="outer" then do nothing else
  2. If user clicks outside id="outer"do something

Can someone recommend something better ?

Community
  • 1
  • 1
Tom
  • 3
  • 1

3 Answers3

0

I'd recommend not using live() if you are not trying to bind events to elements that don't already exist in the DOM. Use bind() or click() instead.

Also, instead of checking for non-empty strings, use the length property:

if (insideOuter.length > 0 && ...
Kon
  • 27,113
  • 11
  • 60
  • 86
  • 2
    this doesn't answer the question at all. It just nit picks at his programming. This would probably be better served as a comment. As an answer it's just confusing. – kasdega Jul 10 '11 at 13:54
  • @kasdega, The question is "Can someone recommend something better?" I believe @Tom was looking for constructive criticism. This is what I'm trying to do here. – Kon Jul 10 '11 at 13:55
  • but the spirit of the question is, "is there an easier and better way to do 1) user clicks index id="outer" then do nothing else and 2) user clicks outside id="outer" do something. You basically gave him a code review that shows how to polish a turd. Sure now its shiny but its still a turd. – kasdega Jul 10 '11 at 14:03
  • Sorry, hardly any of us are in the spirit reading business. And you hardly have the expertise to judge answers as appropriate or not. Furthermore, you should not be posting answers to questions you believe are duplicates. – Kon Jul 10 '11 at 19:12
0
$("body").live('click', function (e) {
    if ( $(e.srcElement).attr("id") !== 'outer' && $(e.srcElement).parents("#outer").length == 0)
        alert('foo');
});
Yuriy Rozhovetskiy
  • 22,270
  • 4
  • 37
  • 68
-1

This is a duplicate question from one asked recently...I'll find that answer and post a link.

$(document).bind('click', function (e) {
 // Do whatever you want; #outer click event has been stopped
});

$('#outer').bind('click', function(e) {
    e.stopPropagation();
});

jQuery bind click *ANYTHING* but *ELEMENT*

How do I detect a click outside an element?

Community
  • 1
  • 1
kasdega
  • 18,396
  • 12
  • 45
  • 89
  • almost but :) http://api.jquery.com/event.stopPropagation/ `the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events` – Tom Jul 10 '11 at 13:48
  • then just switch the live to bind. – kasdega Jul 10 '11 at 13:50
  • Don't down vote something simply because you don't like my comments Kon. All you're harming is the SO community. If you think the question is a duplicate then you're supposed to vote it that way NOT the answer. There's a link at the top of the page for FAQ and META if you have any doubts. – kasdega Jul 10 '11 at 20:24
  • This should be a close vote (when you're permitted) or a comment, not an answer. – Bill the Lizard Jul 11 '11 at 12:35
  • @Bill yep I have been informed by tomalak already. But I didn't have the necessary privileges yet. – kasdega Jul 11 '11 at 13:25