I have a massive long form with about 40 inputs. I want to listen to all focusin events on input fields except ones inside one div with an ID "CxInfo". Is this possible?
Form (Pseudo-Code)
<form>
<input type="text" name="input1" />
<input type="text" name="input2" />
... many more inputs
<div id="CxInfo"> << I want to NOT listen to focusin events on inputs in this div
<input type="text" name="fname" />
<input type="text" name="lname" />
... many more inputs
</div>
</form>
You can use event delegation to your form element, filtering out events triggered on descendants of #CxInfo:
$(myform).on('focusin', ':not(#CxInfo input)', function(e) {
/* Your code here */
});
$('#myform').on('focusin', ':not(#CxInfo input)', function(e) {
this.value = '';
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input value="foo" />
<div id="CxInfo">
<input value="bar" />
</div>
<input value="baz" />
</form>Alternatively, you could stop the propagation of the events triggered inside that element:
$('#myform').on('focusin', 'input', function(e) {
/* Your code here */
});
$('#CxInfo').on('focusin', function(e) {
e.stopPropagation();
});
$('#myform').on('focusin', 'input', function(e) {
this.value = '';
});
$('#CxInfo').on('focusin', function(e) {
e.stopPropagation();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input value="foo" />
<div id="CxInfo">
<input value="bar" />
</div>
<input value="baz" />
</form>I can't test it, but you could use $('Form > input'). On(...) should work as it should only fire for inputs that are a direct child of the form, like your html.
