Why is event.stopPropagation not cancelling $('html').click?

Question

I have an input field which has a focusout event on it. I also have a click event set on $('html') which transfers focus to a different input field. I wrote a click handler for my input field and put in event.stopPropagation(); but it doesn't seem to be working. What am I missing? What does $('html') refer to? My code:

p.replaceWith(
    "<input class='memoryEditField' type='text' value=" + p.text() + ">"
  );
var inputField = $(".memoryEditField");
  inputField
  .on("click", function(event) {
    event.stopPropagation();
  })
  .on("focusout", editFieldLostFocus)
  .on("keyup", editFieldKeyPressed);

The other input field:

$("html").on("touchstart", function() {
    MQInput.focus();
});
$("html").on("click", function() {
    MQInput.focus();
});

does anything show in the console before you click on the input field? — Liora Haydont, Dec 09 '17 at 18:00
@KalaiselvanA A lot of html is being generated through js, do you want to see anything specifically? — Tehreem, Dec 09 '17 at 18:00
@LioraHaydont My click event runs fine but then focus is shifted to the other MQInput — Tehreem, Dec 09 '17 at 18:01
Maybe depending your clicked element (`label` with `for` attribute e.g), this is default behaviour. To test, try to prevent default behaviour too, using e.g `return false;` instead of `event.stopPropagation();` — A. Wolff, Dec 09 '17 at 18:02
@KalaiselvanA Added html. It just refers to another input field through a js class — Tehreem, Dec 09 '17 at 18:03
@A.Wolff return false isn't working either. Can you tell me what is 'html' here? Someone else wrote this line and I am having trouble understanding why use 'html' instead of 'document'? — Tehreem, Dec 09 '17 at 18:04
@Tehreem BUT are you sure the click handler is bound? It looks like dynamic element — A. Wolff, Dec 09 '17 at 18:05
@A.Wolff if i give it a console.log statement, it prints when it is clicked — Tehreem, Dec 09 '17 at 18:06
try `$(document).on('click' , inputField , function(event){ event.stopPropagation(); }).on('focusout' , inputField , editFieldLostFocus).on('keyup' , inputField , editFieldKeyPressed);` .. maybe you need [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) after using `.replaceWith()` — Mohamed-Yousef, Dec 09 '17 at 18:11
@A.Wolff I have huge files of code and I didn't write most of it.. Probably something else messing with it. Thanks though — Tehreem, Dec 09 '17 at 18:13
@Tehreem try to update jquery version to latest. also can You provide link to live example of Your code? I want to debug it — num8er, Dec 09 '17 at 18:16

score 0 · Answer 1 · answered Dec 09 '17 at 18:13

Please provide all of code (what is p in Your code? Also editFieldLostFocus, editFieldKeyPressed).

I think You're missing something in methods editFieldLostFocus, editFieldKeyPressed and it makes illusion that stopPropogation does no work

In fact it works as expected:

$(function() {
  $('p').each(function() {
    var p = $(this);
    p.replaceWith(
      '<input class="memoryEditField" type="text" value="' + p.text() + '">'
    );
  });
  
  function editFieldLostFocus() {
    console.log('call editFieldLostFocus');
  }
  
  function editFieldKeyPressed() {
    console.log('call editFieldKeyPressed');
  }
  
  var inputFields = $(".memoryEditField");
  inputFields
    .on("click", function(event) {
      event.stopPropagation();
      console.log('memoryEditField clicked');
    })
    .on("focusout", editFieldLostFocus)
    .on("keyup", editFieldKeyPressed);
    
  $("html").on("touchstart", function() {
    console.log('MQInput.focus');
    //MQInput.focus();
  });
  $("html").on("click", function() {
    console.log('MQInput.focus');
    //MQInput.focus();
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>FIELD 1</p><br/>
<p>FIELD 2</p><br/>

I removed editFieldLostFocus and editFieldKeyPressed and ti still doesn't work. And I can't post the whole file here it's a bunch of files with 500+ lines each. Thanks though — Tehreem, Dec 09 '17 at 18:18
Not my repo. Can't share that either. I think I am going to have to ask the guy who wrote the MQInput thing to remove it. Everything was working fine before that — Tehreem, Dec 09 '17 at 18:20
I don't think it's about MQInput. I only can suspect jquery version that registers click on field somewhat different or some other element that covering input element. — num8er, Dec 09 '17 at 18:22

Why is event.stopPropagation not cancelling $('html').click?

1 Answers1