0

So I have an input field, that when you goto interact with it with the mouse, it basically wont work. This is because:

  • The input is created after load by expanding that item in edit mode
  • To expand the item, we use a click event on an li, which is a parent of the title which gets replaced with the input
  • Because of the way the app works, we need to use live instead of click, which prevents using stopPropagation()

So we are using:

$('li').live("click",function(e) {
    if ($(e.target).is('input') ) { return; }

    // do stuff
});

Then because of this, obviously any time the mouse tries to click in the input, either to move the cursor, highlight its contents, etc, it just ignores it.

If I remove the target line, when I click in the input it closes the li.

So... my question: Any idea how to make the input clickable, without closing the li, and still being able to use live instead of click?

Horse
  • 3,023
  • 5
  • 38
  • 65
  • *"Then because of this, obviously any time the mouse tries to click in the input, either to move the cursor, highlight its contents, etc, it just ignores it."* Why would it do that? You haven't called `preventDefault`, or done a `return false`. – T.J. Crowder May 30 '12 at 11:53
  • 1
    *"To expand the item, we use a click event on an li, which is a parent of the title, and that gets replaced with the input"* You replace the `li` with the `input`? That will result in an invalid DOM structure, the only places `li` elements are valid, `input` elements are not valid. Code is worth a thousand words, recommend showing us a complete, simplified, self-contained example (post the code to the question, and optionally *also* to http://jsbin.com or http://jsfiddle.net). – T.J. Crowder May 30 '12 at 11:54
  • Not seeing a problem with that check: http://jsbin.com/eritof (I had the `input` replace a `span` inside the `li`). Side note: `live` is deprecated and was never a very good idea, recommend using `delegate` on a container near the `li` elements (such as the `ul` or `ol` they're in). With jQuery 1.7 or higher, you can use `on` rather than `delegate` although personally I prefer the clarity of the former. But that JSBin example I linked uses `live` as that's what you're using. – T.J. Crowder May 30 '12 at 12:02
  • the same thing happens with and without preventDefault. Also no I replace a div inside the li with the input. Will try and get some self contained code up, cant rly link to the app yet. also will have a look into delegate instead. will post backshortly – Horse May 30 '12 at 12:04
  • @ Horse: Linking to the app wouldn't be helpful, as SO questions must be self-contained. Instead, do a minimal self-contained example like my JSBin above, put the code in the question, and then *also* link to JSBin or similar if you like. – T.J. Crowder May 30 '12 at 12:05
  • annoyingly I have created a self contained version, and it doesnt happen, so I am now in the process of butchering my code to find whats happening inbetween thats breaking it – Horse May 30 '12 at 13:32

2 Answers2

0

Hi if i get you right you want to prevent event propagation but you are not able to use stopPropagation() method. Check documentation of live method, if you want to stop propagetion your method should return false;

See api documentation for the live method : live()

IgorMadjeric
  • 389
  • 2
  • 3
0

You can still use e.stopImmediatePropagation():

http://jsfiddle.net/NJ9cb/

Esailija
  • 138,174
  • 23
  • 272
  • 326