I have a pop-up that has a .close class which is basically just an X plus some extra spacing. My problem is, I can't get the click event to work when it's in my code, however, if I paste it into Google's dev tools console, it works as expected...
The culprit...
$('.modal').bind(touchClick, 'close', function(e) {
$('.modal.active').removeClass('active');
$('.modal.b').removeClass('b');
$('.modal.c').removeClass('c');
$('.modal.d').removeClass('d');
$('.modal.e').removeClass('e');
$('.modal .content').html('');
});
The setup...
<div class="modal">
<div class="content">
<div class="close">
<div class="x"></div>
</div>
</div>
<div class="bg"></div>
</div>
Is your script above your html?
Try this:
$(function(){
$('.modal').bind(touchClick, 'close', function(e) {
$('.modal.active').removeClass('active');
$('.modal.b').removeClass('b');
$('.modal.c').removeClass('c');
$('.modal.d').removeClass('d');
$('.modal.e').removeClass('e');
$('.modal .content').html('');
});
});
Make sure the .modal node is in the DOM before you execute your code.
The code attaches a click handler to .modal. If it isn't in the dom, there is nothing to attach it to.
If the modal is being injected into the DOM, make the click handler attach to the body instead.
$('body').bind(touchClick, '.modal .close', function (e) {
...
});
Note that I added a . to close to make it a class...
Related
HTML:
<div class="channellist"></div>
Using Ajax i am getting the channels dynamically when the page loads and appending in the channellist container. After appending my html looks like this.
<div class="channellist" id="channellist">
<div class="c01" id="c1"></div>
<div class="c01" id="c2"></div>
<div class="c01" id="c3"></div>
</div>
I tried like this
$('.channellist').hover(function() {
alert(this.id);
});
I got the alert message.
when i tried the hover on c01 class i didnt got the alert.
$('.c01').hover(function() {
alert(this.id);
});
I dont know where it is going wrong. Can anyone help to figure it out.
You need use event delegation, try this
$('.channellist').on('mouseenter mouseleave', '.c01', function() {
console.log(this.id);
});
// only for example
setTimeout(function () {
$('.channellist').html(
'<div class="c01" id="c1">1</div>' +
'<div class="c01" id="c2">2</div>' +
'<div class="c01" id="c3">3</div>'
);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="channellist" id="channellist"></div>
$.on
The name "hover" used as a shorthand for the string "mouseenter
mouseleave". It attaches a single event handler for those two events,
and the handler must examine event.type to determine whether the event
is mouseenter or mouseleave. Do not confuse the "hover"
pseudo-event-name with the .hover() method, which accepts one or two
functions.
Using Ajax i am getting the channels dynamically
This can be sorted using event delegation like:
$('#channellist').on('mouseenter', '.c01', function() {
alert(this.id);
});
syntax of event delegation is something like:
$(staticParent).on(event, selector, callback);
where $(staticParent) should be the element which was available when DOM was ready, In your case it seems to be #channellist element.
Since code is dynamically attached to the div, onload of the document the event will not be present, So use .live event or use .on by delegating the event. Then event will execute. For your reference Check this link:
https://jsfiddle.net/HimeshS/ocxoy6c2/
https://jsfiddle.net/HimeshS/ocxoy6c2/
For .live:
$(.c01).live("mouseenter", function(){
alert(this.id);
});
<div class="channellist" id="channellist">
<div class="c01" id="c1"></div>
<div class="c01" id="c2"></div>
<div class="c01" id="c3"></div>
</div>
Your blocks are empty, their height is 0, and you can't hover on tham.
Try to make height more, or print some text inside,
Like:
<div class="channellist" id="channellist">
<div class="c01" id="c1">1</div>
<div class="c01" id="c2">2</div>
<div class="c01" id="c3">3</div>
</div>
I am using JqueryMobile 1.3.2. I would like to add some event when user clicking the header. For example, popup an alert "Hello". What can I do?
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
Listen to two events instead of binding a click event. Collapsibles have two special events you can listen to and run code when they trigger, expand and collapse.
For jQuery Mobile 1.4 collapsibleexpand and collapsiblecollapse.
$(".selector").on("collapse", function () {
alert("Collapsed");
});
$(".selector").on("expand", function () {
alert("Expanded");
});
Demo
$('#Selector').bind('expand', function () {
alert('Expand')
}).bind('collapse', function () {
alert('collapse')
});
<div data-role="collapsible" id="Selector">
<h4>Heading</h4>
<p>How can I popup an alert of “Hello” after clicking collapsible under JqueryMobile</p>
</div>
DEMO
I'm using bootstrap's modal and I would like to have a navbar at the top of the modal that uses jquery's .load to change the view of the modal when clicked. I am able to get the modal up with the default view to show but I can't get the rest of the buttons to fire when clicked. Below id a simplified version of what I want. Thanks for any help.
<div class="modal-header">
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button>
<h3 id="myModalLabel">Account Settings</h3>
</div>
<div class="modal-body">
<div class="btn-group">
<button id="account" class="btn">Account</button>
<button id="edit-account-users" class="btn">Users</button>
</div>
<div class="wrapper">
<!-- Content -->
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss='modal' aria-hidden='true'>Close</button>
</div>
$(document).ready(function () {
accountData.init();
});
var accountData = {
'init' : function() {
$('.account-settings, #account-settings #account').click(function() {
$('#account-settings').load('/partials/account/index.html', function() {
$('#account-settings .wrapper').load('/partials/account/account_data.html');
});
});
$('#edit-account-users').click(function() {
$('#account-info .wrapper').load('/partials/account/account_users.html');
});
}
};
The reason your buttons didn't fire is because your event bindings may be attached to elements that no longer exist.
Say if you were to replace content using .load(), the original event handlers to the elements will be lost. That's why event delegation is very useful here, bind the event to the document instead of the individual element. (You're not going to replace document) So when the user clicks anything inside the page, the event will be picked up by document and delegated to a child element according to the selector provided, eg. #edit-account-users.
Use event delegation .on() instead of .click().
$(document).on('click', '#edit-account-users', function() {
$('#account-info .wrapper').load('/partials/account/account_users.html');
});
Read more about .on(): http://api.jquery.com/on/
I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!
Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.
I've been trying to figure out the relatively new (at least for me, I guess) .on() method provided with jQuery versions 1.7.x onwards. We've been using live(), bind() in our code to handle event handlers till now and we're thinking of an overhaul because of the performance issues which .live() seems to have.
So here's my problem. This is the page structure I have in my page:
<div id="header"></div>
<div id="content"></div>
<div id="footer">
<div id="default"></div>
<div class="close">Close</div>
<div id="extras">//some random stuff// </div>
</div>
I've created an object to store frequently used selectors to such as $(document), $("#header"), $("#footer") like this:
var elements = {
$doc: $(document),
$foo: $("#footer"),
$head: $("#header")
};
The behavior expected from the click of .close inside #footer is that #extras must hide from view. I tried to bind the click event of .close to #footer (delegated) like this:
elements.$foo.on("click","div.close",hideFooter)
WHICH DID NOT WORK. But, if bound to elements.$doc like this:
elements.$doc.on("click", "div.close", hideFooter);
IT WORKS. But isn't this how .live() works? (If for every click it should to go to the DOM start and bubble down to div.close)
Am I doing something wrong here?
EXTRA INFO
The contents of the anonymous function hideFooter are :
function hideFooter(event) {
$(event.currentTarget).next().hide("slow")
.closest("#footer").css({ "opacity": "0.8" });
$("#default").show();
}
THE CODE SEQUENCE in default.js
var elements = {
$doc: $(document),
$foo: $("#footer"),
$head: $("#header")
};
elements.$doc
.ready(function () {
elements.$foo.on(events.click, "div.close", hideFooter);
})
.on(events.click, "#content", HideHeaderFooter)
.on(events.hover, "#footer", showFooter);
To make sure the footer element is loaded before your script runs, you can put your script toward the bottom of the page.
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer">
<div id="default"></div>
<div class="close">Close</div>
<div id="extras">//some random stuff// </div>
</div>
<script src="/default.js" type="text/javascript"></script>
</body>
Or if you want your <script> to be in the <head> of the page, you can wrap your code in a jQuery .ready() handler so that it doesn't run until the page is loaded.
$(function() {
// Code in here will not run until the rest of the page has loaded.
var elements = {
$doc: $(document),
$foo: $("#footer"),
$head: $("#header")
};
elements.$doc
.on(events.click, "#content", HideHeaderFooter)
.on(events.hover, "#footer", showFooter);
elements.$foo.on("click","div.close",hideFooter);
});
So now your code will be delayed until the page has loaded, and so your footer element will exist and be ready for DOM selection.
Why don't you put it together in the handler? This should work:
elements.$foo.on("click","div.close", function() {
$(this).next().hide("slow").closest("#footer").css({ "opacity": "0.8" });
});
You have this
elements.$foo.on("click","div.close",HideFooter)
Did you mean this?
elements.$foo.on("click","div.close",hideFooter)
Notice the 'H' in your function name.