Knockout binding with resets jquery bindings - javascript

Given the following code:
<body data-bind="with: localization">
<button id="btnLogin">Login</button>
</body>
And the following javascript
$(function () {
$('#btnLogin').click(function () {
console.log('Clicked');
});
ko.applyBindings(MainView);
});
My console is empty if i click on the button
If I change the markup to this:
<body data-bind="">
<button id="btnLogin">Login</button>
</body>
I get "clicked" in my console when testing.
How can I get my events to work properly?

Here's an alternate way to approach your problem, using Knockout to handle clicks:
<body data-bind="with: localization, click: activate">
<button id="btnLogin">Login</button>
</body>
And define the activate function on your ViewModel:
var Vm = function() {
this.activate = function() {
console.log('view model activated, possibly through click');
};
}
This allows you to re-use the activate logic elsewhere.

Related

How to call a function when a div is dynamically generated using jQuery

The scenario I want to achieve is as follow:
$("#parentDiv").on("load",'#childDiv', function () {
// do something...
});
I would like to call a function when a child div is dynamically generated and shown on the page, but there is no suitable event that can achieve this. Any hint or help would be appreciated.
Instead of load, you can make use of a custom event which gets triggered with .trigger():
$(document).ready(function() {
$("button").on("click", function() {
$("body").append("<div id='new'>Created</div>").trigger('custom-event');
});
});
$(document).on("custom-event", function() {
console.log('DIV created!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Create element</button>
</body>

Javascript event triggering creating multiple button .on('click)

I'm using HTML slim for the code below.
.page
.paper
button.button.js-copier I copy things
- content_for :js_includes do
javascript:
var startingHtml = $('.page').html();
function initializePlugin() {
$('.js-copier').each(function () {
$(this).on('click', function () {
$('.page').append(startingHtml);
$(document).trigger('page-refreshed');
});
});
}
// Run it right away
initializePlugin();
$(document).on('page-refreshed', initializePlugin);
Is there a way to fix the fact that when I click on the "I copy things" button, it creates multiple copies of the button as it is iterating over all the button from the button that was selected?
Also, is there a better way to write this code. All I'm trying to do is duplicate the button anytime I click on any buttons(first and any new button created buttons)
-Anthony
First change this:
$('.js-copier').each(function () {
$(this).on('click', function () {
...
to this:
$('.page').on('click', '.js-copier', function () {
...
Read this to understand https://learn.jquery.com/events/event-delegation/#event-propagation
Then remove the 'page-refreshed' event because you don't need it:
$(document).trigger('page-refreshed');
...
$(document).on('page-refreshed', initializePlugin);
Demo solution:
var startingHtml = $('.page').html();
function initializePlugin() {
$('.page').on('click', '.js-copier', function () {
$('.page').append(startingHtml);
});
}
// Run it right away
initializePlugin();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="paper">
<button class="button js-copier"> I copy things</button>
</div>
</div>

I need a button click instead of setInterval

I found this code but for my site I need a button instad of setInterval. I tried jquery("#btn").click(function(){}) but can't get it working.
<script>
jQuery().ready(function(){
setInterval("getResult()",1000); //set theinterval for the update
});
function getResult(){
jQuery.post("update.php", function(data) {
jQuery("#readings").html(data);
});
}
</script>
<div id="readings"></div>
You need to add a click event listener to a button. The jsfiddle below should help you. This can be done using pure JavaScript but as you suggested jQuery.
<button id="test">Test</button>
$("#test").click(function() {
alert("Click event!");
});
http://jsfiddle.net/89987ps1/
You can call your function like this:
<button onclick="getResult()" >Get result</button>

data-bind="click" not working with nested knockout view model

I have a knockout view model that is set up as an observable as my main view model. In the child element, it seems that I can't set up data-bind="click: the same way that I can when I am in the parent element.
My html:
<button id="myButton" type="button" class="btn btn-lg btn-primary" data-bind="click: test">Click Me</button>
In my main view model:
self.childElement = ko.observable(new childElementVm());
and in childElementVm
var childElementVm= function () {
var test = function(){
alert('this is a test');
}
}
what do I need to do differently to use data-bind="click: test" here?
To note, my applyBindings is fine (other knockout observables are functioning correctly) and the button is contained inside of a <div data-bind="with: childElement"
EDIT: here is a fiddle
Your test function is scoped to the childElementVmonly. Change your implementation to this:
var childElementVm= function () {
this.test = function(){
alert('this is a test');
}
}
or this:
var childElementVm= function () {
var self = this;
self.test = function(){
alert('this is a test');
}
}
Here is a working example

Click a button element on page load

I'm trying to auto-click a button to initiate a function when the html page loads. I've tried document.getElementById('watchButton').click and it doesn't seem to work, the button is not clicked. Any suggestions?
<div class="content">
<div class="action-area ch30">
<button class="button dh" id="watchButton">Start Geolocation Watch</button>
<button class="button dh" id="refreshButton" >Refresh Geolocation</button>
</div>
The javascript:
run:function() {
var that = this;
document.getElementById("watchButton").addEventListener("click", function() {
that._handleWatch.apply(that, arguments);
}, false);
document.getElementById("refreshButton").addEventListener("click", function() {
that._handleRefresh.apply(that, arguments);
}, false);
},
Thanks!
I'd put it inside document.ready (so it doesn't fire until the DOM loads) and use jQuery syntax:
$(function() {
$('#watchButton').click();
});
http://jsfiddle.net/isherwood/kVJVe/
Here's the same fiddle using jQuery syntax: http://jsfiddle.net/isherwood/kVJVe/4
That said, why not just name your function and call it directly?
It would be click() not click
document.getElementById("watchButton").click();
You would need to call it onload or after the function has run
window.onload = function () {
document.getElementById("watchButton").click(); };
Try this ^^
try trigger
<script>
$(document).ready(function() {
$("#watchButton").trigger('click');
});
</script>
document.getElementById("studyOne").click();
$("#studyOne").trigger('click');
Put this in onload function. It worked for me.

Categories