We Keep Coding

JavaScript one() event handling chaining causes strange errors

I need your help. I'm currently writing some code to handle a modal behavior like clicking on buttons. For catching multiple events once, I already posted this question:
JavaScript event handling code get's called multiple times
There it said to use the jQuery .one() function to only catch one click when opening the popup and clicking one button multiple times. This works great for one button but when I use two buttons, I came up with another error.
First I've changed my event handling to accept multiple events:
jQuery(document).ready(function($) {
$('button').click(function() {
openConfirmationRemodal().one({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
});
});
When I click on a button, my popup opens with two buttons:
When I click now the Nein button, the popup closes and the console logs Cancellation. When I open the popup again now and click the Ja button, Confirmation get's logged but twice. I really don't understand this and how to fix this..
If I do this the opposite way, the error is the same but just in a different order:
Here you have a working example. Somehow the action in die example get's triggered twice (initially). This is different to the normal progress in my browser but I think this depends on the snippet functionality:
jQuery(document).ready(function($) {
$('button').click(function() {
openConfirmationRemodal().one({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
});
});
function openConfirmationRemodal() {
let remodal = $(`[data-remodal-id=test]`);
remodal.remodal().open();
return remodal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/src/remodal.js"></script>
<button>Open Pop-Up</button>
<div class="remodal" data-remodal-id="test">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

The issue is because you re-bind the events every time you click the 'Open' button. To fix this define the modal and events just once, when the page loads, and then call open() on the modal when the button is clicked. Try this:
let $remodal = $(`[data-remodal-id=test]`);
let modal = $remodal.remodal();
$remodal.on({
confirmation: function() {
console.log('Confirmation');
},
cancellation: function() {
console.log('Cancellation');
}
});
jQuery($ => {
$('button').click(function() {
modal.open();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/src/remodal.js"></script>
<button>Open Pop-Up</button>
<div class="remodal" data-remodal-id="test">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

How do I get click event of model form button?

On my django web app, I have a webpage and when a button is clicked a modal form is opened. On this form there are a few fields and a save button. When the save button is pressed, I want to do something, like printing an alert. Here is what I tried:
Model form code:
<div class="container-content">
<div class="infor-experience col-lg-2 more_info">
{% if request.user|isEmployer %}
<div class="add-to-list">{% include "layout/addtolistmodal.html" %}</div>
<div class="connect-now bottom">{% include "layout/bidmodal.html" %}</div>
{% endif %}
<!-- more code below here -->
Javascript block in same HTML file as modal above:
<script type="text/javascript">
// Add to short list handler
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
</script>
Basically, what I want to do is when the user clicks save on the add-to-list modal, print the alert "TEST".
From my understanding the reason its not working is because it cannot find '.add-to-list' but what I should use instead?

Just attach your click event to already present element which seems to be div.infor-experience, since your modal html gets appended after DOM load. Also, make sure your script renders in web browser if you have provided any conditions for them to render.
$('.infor-experience').on('click', '.submit', function(e) {
alert("TEST");
})

It might be that positioning of your script. At the time of its execution the DOM may not be ready or exist yet.
You could wrap your DOM related codes like so:
$(document).ready(init);
function init(){
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
}

Try this instead
$(document).ready(function () {
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
});
});
you should add the code under $(document).ready() so that it waits for whole DOM to load and then attaches the method instead doing so before loading of DOM.

div click event automatically getting fired on page load

I want to create html page which has series of ( e.g.div has list of employee details ). When user click on div I want to navigate to another page. Please have a look at this.
Problem is click event of div is getting fired when I am loading page for the first time.
How can I avoid unnecessary click events those are getting fired during page load event?
Below is my html code
<div data-bind="click: clickMe('ok1')">
<h1>Emplyee details</h1>
<p>This is test</p>
</div>
<div data-bind="click: clickMe('ok2')">
<h1>Emplyee details</h1>
<p>This is test</p>
</div>
var ViewModel = function(){
var self = this;
self.clickMe = function(url){
//This function is automatically getting called
//when page loads.
alert(url);
}
}
ko.applyBindings(new ViewModel());
Regards,
Hemant

You need to pass a function to the click handler rather than the result of the click function.
Doing clickMe() fires the method and returns the result to the handler.
One way to do what you want is to wrap the function call in an anonymous function as so:
function(){ clickMe('params'); }
So you get:
<div data-bind="click: function(){ clickMe('ok1'); }">
Alternatively you can use the bind function on your clickMe method to pass the params you want:
clickMe.bind($data, "param1")
So you get:
<div data-bind="click: clickMe.bind($data, 'param1')">

javascript jQuery stops?

I have some Jquery (mobile) actions on the .ready() function in order to initialize the html elements with the correct values (passed as $def var):
If I comment this actions (see the end of the script) the script works perfectly (but obviously without the necessary html 'select' initial values).
If I use the actions the script runs ok (until the last action) but it never reaches the next statement 'get_status()'...
<script type="text/javascript">
var gauge_humidity1,
gauge_temp1,
gauge_temp2,
gauge_temp3;
jQuery(document).ready(function() {
//### EVERYTHING WORK IF I COMMENT ALL THIS JQUERY'S ###
//initiate sliders
//OLD jQuery('#select_mode').val('$mode').slider('refresh');
jQuery('#select_mode').val('$mode')
jQuery('#select_r1_water').val('$r[0]');
jQuery('#select_r2_heat').val('$r[1]');
jQuery('#select_r345_window').val('$r[2]');
jQuery('#select_r6_shadow').val('$r[5]');
//initiate select_light
jQuery('#select_light').val('$s_ini[2][5]');
### END OF COMMENT ###
### IF I UNCOMMENT THE GET_STATUS() NEVER RUNS ###
get_status();
});
</script>
<form id="form_settings" action="" method="POST">
<div id="section" data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>
Control
</h3>
<div data-role="fieldcontain">
<label for="select_mode">
Modo
</label>
<select name="select_mode" id="select_mode" data-role="slider" onchange="update_mode()">
<option value="Manual">
Manual
</option>
<option value="Auto">
Auto
</option>
</select>
</div>
</div>
</div>
</form>

I think the problem is $(document).ready(), the equivalent of $(document).ready() in JQM is $(document).bind('pageinit')
Just have a look at the jQuery Mobile documentation : http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
EDIT:
<script type="text/javascript">
jQuery('#page_settings').bind('pageinit', function() {
// Your code here
});
</script>

solution:
just added the 'pageinit' close to the html div data-role="page" and applied to '#page_settings' page (instead of document) since is were the controls are.
<div data-role="page" id="page_settings">
<script type="text/javascript">
jQuery('#page_settings').bind('pageinit', function() {
//initiate sliders
jQuery('#select_mode').val('$mode').slider('refresh');
jQuery('#select_r1_water').val('$r[0]').slider('refresh');
jQuery('#select_r2_heat').val('$r[1]').slider('refresh');
jQuery('#select_r345_window').val('$r[2]').slider('refresh');
jQuery('#select_r6_shadow').val('$r[5]').slider('refresh');
//initiate select_light
jQuery('#select_light').val('$s_ini[2][5]').selectmenu('refresh');
});
</script>

No pagechange event firing

In jQuery mobile, I am trying to detect a successful page change to a specific page. I have the following code, inline on the page I want to load.
<script>
$(document).bind( "pagebeforechange", function( e, data ) {
alert("pagebeforechange");
});
$(document).bind( "pagechange", function( e, data ) {
alert("pagechange");
});
$(document).bind( "pagechangefailed", function( e, data ) {
alert("pagechangefailed");
});
$(document).live( "pagebeforechange", function( e, data ) {
alert("pagebeforechange live");
});
$(document).live( "pagechange", function( e, data ) {
alert("pagechange live");
});
$(document).live( "pagechangefailed", function( e, data ) {
alert("pagechangefailed live");
});
</script>
I get the the appropriate alerts when loading the page directly, or refreshing, but not when navigating from another area in the Jquery Mobile app.
Page is called by the the "Your Car" Tab in the footer
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Features</li>
<li>Your Car</li>
<li>Contact</li>
</ul>
</div>
</div>

Would it work to place your code in the pageshow event? It may if you are trying to detect the page or location. Something like this maybe:
<script type="text/javascript">
$('[data-role=page]').live('pageshow', function (event, ui) {
hash = location.hash;
page = hash.susbtr(1);
if (page.indexOf('about.html') >= 0) {
alert('you made it!');
}
});
</script>
UPDATE
After testing this scenario a bit more and rereading your question, I think I was able to reproduce the results.
This works as you described and only fires alerts when loading the page directly or refreshing the page:
<body>
<div data-role="page">
<!-- page stuff -->
</div>
<script type="text/javascript"> ..bind events... </script>
</body>
However, when I move the javascript directly inside the page, it works as expected and fires all of the bound events, no matter how the page was reached:
<body>
<div data-role="page">
<script type="text/javascript"> ..bind events... </script>
<!-- page stuff -->
</div>
</body>

Where are you binding to this events?
Have you read following in the Docs http://code.jquery.com/mobile/latest/demos/docs/api/events.html:
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.

Luke's thinking is in the right direction: clearly the problem you had has to do with where in the code the binding is occurring. This is proved by shanabus.
However, in your case, you should be doing the binding when jQuery mobile's mobileinit event is fired, not pageInit, as Luke is suggesting.
Example (fires on all page change events):
<script type="text/javascript">
$(document).bind('mobileinit', function() {
$(document).on('pagechange', function () {
window.alert('page changed!');
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
As illustrated in the code above, be mindful that handlers triggered by mobileinit must be included before the jQuery mobile <script> tag.