It's unclear if I have correctly understood the problem. Let me try to rephrase the issue as I interpreted it (my response will be based on that).
Issue: Multiple div elements with an input in each. Whenever the value of the input changes, it should automatically trigger a click event on the corresponding button within the parent div.
Solution: Target the input within each div.ap-create-story-panel-wrap
$('div.ap-create-story-panel-wrap input')
If you also want the click event to trigger when the user moves to the next input using the TAB key, listen for a change
.on('change', function() {});
In the callback function, retrieve the target button from the parent div
let tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
let bCls = '.btn-'+tgt; // button class
Subsequently, trigger the click event
$(bCls).trigger('click');
The entire process looks like this:
$('div.ap-create-story-panel-wrap input').on('change', function() {
let tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
let bCls = '.btn-'+tgt; // button class
$(bCls).trigger('click');
});
Please let me know if you prefer not to trigger a click event when the focus is lost from an input, only when a mouse click occurs after a change (although I cannot think of a reason for this).
In any scenario, I would avoid attaching a persistent click event directly to the document. Instead, I suggest detaching the event at the end of the function as recommended in one of the previous answers, or updating and comparing the data-old values of the inputs right after the click event triggers.
UPDATE:
As per the feedback provided in a comment, please refer to the inline comments for clarification (especially note the modification in the first line of the HTML snippet).
$(document).ready(function() {
// Record the original value of each input to compare with later
$('div.ap-create-story-panel-wrap input').each(function() {
$(this).data('old', $(this).val());
});
// Listen for mouse clicks anywhere except input fields
$(document).mouseup(function(e) {
// Identify which input values changed
$('div.ap-create-story-panel-wrap input').each(function() {
let ov = $(this).data('old');
let nv = $(this).val();
if(nv != ov) {
console.log('Previous value: ',ov || "empty field");
console.log('Current value: ',nv || "empty field");
// Trigger a click event on the respective button
let tgt = $(this).closest('div.ap-create-story-panel-wrap').data('panel');
console.log('Change detected in ', tgt);
let bCls = '.btn-'+tgt; // Button class
$(bCls).trigger('click');
// Update data-old with the new value for further tracking
$(this).data('old', $(this).val());
}
});
});
$('div.ap-create-story-panel-wrap').on('click', function(e) {
e.stopPropagation();
return false;
});
// Added only for demo purposes, unnecessary in actual codebase
$('a').on('click', function() {
console.log('Clicked button target: ', $(this).data('target'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- P.S: Modified data-panel="infopanel" to data-panel="basicinfopanel" for consistency with other divs -->
<div class="ap-create-story-panel-wrap" data-panel="basicinfopanel">
<input type="text">
</div>
<a class="btn-basicinfopanel" data-target="certificatepanel">Save/Next</a>
<div class="ap-create-story-panel-wrap" data-panel="certifypanel">
<input type="text">
</div>
<a class="btn-certifypanel" data-target="certifypanel">Save/Next</a>
<div class="ap-create-story-panel-wrap" data-panel="photopanel">
<input type="text">
</div>
<a class="btn-photopanel" data-target="photopanel">Save/Next</a>
I hope this explanation is beneficial.