I try to attach a click handler for links with a specific class within an anonymous function definition which is unfortunately not working. Why?
(function($) {
var init = function() {
console.log('init...');
mediaPlayer($('.media-toggle'));
};
var mediaPlayer = function(mediaLink) {
console.log('media player init ...');
console.log(mediaLink);
mediaLink.on("click", function(e) {
console.log('media toggle clicked ...');
e.stopPropagation();
e.preventDefault();
alert('clicked');
});
};
init();
})(jQuery);
The used HTML markup looks like:
<ul>
<li>
Preview 1
<audio src="https://www.foo.org/audios/preview1.mp3"></audio>
</li>
<li>
Preview 2
<audio src="https://www.foo.org/audios/preview2.mp3"></audio>
</li>
<li>
Preview 3
<audio src="https://www.foo.org/audios/preview3.mp3"></audio>
</li>
</ul>
I have to admit, that I use the MediaElement.js library to play the audio files, which works fine.
If I would use a "global" function handler definition like the code snippet below, it would work. But I don't understand why and what is the difference.
$(function(){
$('.media-toggle').click(function(e) {
e.preventDefault();
alert('Clicked ...');
});
I missed a very important part on my example. A piece of JS code after this function is or was responsible for the not working code. Which removed all the event handlers by moving a parent div element (with all the links inside) to another part within the DOM tree.
Instead of
$(".preview-audio").remove().insertAfter($(".foo"));
I should rather have written
$(".preview-audio").insertAfter($(".foo"));
The notable difference between the two pieces of code is that the one which doesn't work runs immediately and the one that does runs on DOM Ready.
The problem is almost certainly that you are calling $('.media-toggle') before any elements with that class exist in the DOM, so it has a length of 0.
Replace your IIFE:
(function($) {
...
})(jQuery);
with a ready handler:
jQuery((function($) {
...
});
You have defined a function mediaPlayer but you have a typo when calling it: medialPlayer($('.media-toggle'));
It's likely you would see an error in the console.
Also, make sure you've got this inside an onload or $(document).on('ready') function to ensure that the DOM node you're interested in (.media-toggle) has been loaded.
You are missing the doc ready code in here:
init();// possibly element is not rendered.
})(jQuery);
Instead try this:
$(init);
})(jQuery);
Or:
(function($,document) {
....
$(document).ready(init);
})(jQuery,document);
Related
I have a simple div in one of my views that I want to click to hide another element on the page. I put this in my application.js But it doesn't do anything. Did I put it in the wrong place?
function toggleNewPostForm {
$('.new-post-btn').hide();
}
Use document ready to make sure document is loaded before selecting an element from HTML and call your function inside
function toggleNewPostForm(){
$('.new-post-btn').hide();
};
$( document ).ready(function() {
toggleNewPostForm();
});
Try something like this
<div class="xyz">Click here!</div>
in javascript
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
Also check if event listener is added after document ready method? i.e
$(function(){
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
});
If this is the only js you have, there will be no click-behaviour. You have to tell the element, that is has to react to a click-event.
Try this in your application.js-file:
function toggleNewPostForm() {
$('.new-post-btn').hide();
}
$(document).on('ready page:load', function(){
$('.new-post-btn').on('click', function(){
toggleNewPostForm();
});
});
P.S.: As RGraham points out, you have to write the parameter-paranthesis if you define a function.
P.P.S.: In ruby on rails, you should check against 'ready' and 'page:load' as document-ready-handlers, because Ruby on Rails uses the "Turbolinks"-library by default.
I am new to jQuery and am making a few .click() functions for my website, but no matter what I try, I can't get them to work.
jquery:
$(document).ready(function(){
$("#underlay-img-container-btns-add").click(function(){$("#underlay-img-container-form-file").click();});
$("#underlay-img-container-btns-submit").click(function(){document.forms['underlay-img-container-form'].submit();$("#underlay-img-container-general_loader").css("display","inline-block");});
$("#underlay-img-container-form-file").change(function(){readURLImg(this);});
$("#underlay-gif-container-btns-add").click(function(){$("#underlay-gif-container-form-file").click();});
$("#underlay-gif-container-btns-submit").click(function(){document.forms['underlay-gif-container-form'].submit();$("#underlay-gif-container-general_loader").css("display","inline-block");});
$("#underlay-gif-container-form-file").change(function(){readURLImg(this);});
});
readURLImg (displays an image preview before submission. This is part of a file uploading script.):
function readURLImg(input){if(input.files&&input.files[0]){var reader=new FileReader();reader.onload=function(e){$("#underlay-img-container-preview").attr("style","background-image:url("+e.target.result+");color:#fafafa");}
reader.readAsDataURL(input.files[0]);}}
I am sure my ids are correct. I have been trying to find the answer for hours with no success.
i have checked your website
then I've clicked on button upload you picture > opened the terminal and test
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
and the results appears
So, your problem is to call the events when the popups are ready
to Understand the concept
close the popup and try the same code it will retrieve empty array '[]'
<div class="btn" id="green" >
<div class="icon-image"></div>
<span>Upload your picture</span>
</div>
and add
$('.btn#green').click(function() {
$('.overlay').html($('.overlay').html().replace(/!non_select_tag!/g, 'img'));
$('.overlay').html($('.overlay').html().replace(/!non_select_txt!/g, 'Picture'));
// add you events
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
$('.overlay').show();
})
this will work
try
$("#underlay-img-container-btns-add").on( 'click', function () { ... });
may not work because content is dynamically created.
try
$("#underlay-img-container-btns-add").bind( 'click', function () { ... });
To bind events to dynamically generated elements in DOM, you may use
$('document').on( 'click', '#selector', function () {
...
});
This binds event to the DOM rather than to the element directly, which may not exist all the time.
try
$("body").delegate("#underlay-img-container-btns-add",'click',function(){
....
});
I'm importing some php into a div block using a link like this
<a class="ajax-link" href="login.php">Login/Register</a>
and such script (that uses jquery load to fill the div block).
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
});
Now let's say the loaded php file after running the php portion also contains a link with "ajax-link" class and I want that link too to change the contents of that div block
<?php
...
?>
<a class="ajax-link" href="view.php">View content</a>
But rather than running the above mentioned function on it, it seems to ignore it completely and opens a new page instead.
So basically... how can I run that script on imported parts of the page?
This is where event delegation comes in handy.
$(document.body).on("click", "a.ajax-link", function(e) {
// ...
});
This code needs to be re-run ... dynamically added objects are not included in previous on clicks.
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
... you could also ... turn off the old watcher.
$("a.ajax-link").off("click");
UPDATE:
Try ...
$("a.ajax-link")
.off("click")
.on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
You have to apply the click listener on the newly added link as well, as the element has to be loaded into the DOM when applying the click listener in order for it to be applied. However, if you just re-run the same code you'll like run into the problem of having two event listeners on the first ajax-link.
Try this:
// We still use on doc ready to be sure the
// first link is present before applying listener
$(function()
{
// Reset all listeners on ajax-links and
// then apply listeners via function
resetAjaxLinks();
});
// This function will remove any ajaxlink
// listeners and then apply them correctly
function resetAjaxLinks()
{
// Remove event listeners and then on click....
$("a.ajax-link").off('click').on("click", function(e)
{
// Prevent default link action...
e.preventDefault();
// Load in your content...
$("#body-element").load(this.href);
// Once content is loaded in, reset event listeners!
resetAjaxLinks();
});
}
EDIT: This is not the best method for this. Instead, use event delegation as specified by this answer.
I am working on a hand me down project that was written by someone who was clearly better at HTML and JavaScript than myself. The html has AJAX links like this:
<ul class="subNav">
<li><a link="contacts.html">Contacts</a></li>
<li><a link="contacts_add.html">Add Contact</a></li>
</ul>
Which I think are handled in this code:
$('.subNav li a').click(function() {
var href = $(this).attr('link')
$('#mainStage').load(href, function() {
pageLoad();
})
})
All of the code above works perfectly.
My problem is I can't seem to recreate this functionality. I am using this HTML:
<div class="nameTitle colorOne"><a link="contacts_add.html">
<span class="firstNameField">Contact Name</span>
</a></div>
and this JavaScript:
$('.nameTitle').click(function() {
alert('')
$('#mainStage').load("contacts_add.html", function() {
pageLoad();
})
})
When I click the "nameTitle" class it should load contacts_add.html into the mainStage section of the page but I cannot see anything happen. I am sure someone fluent with this style of coding could tell me why my event never fires but the earlier code does.
Thanks in advance,
You should try altering your code to something like this:
$('.nameTitle').click(function() {
//This line finds the address to load
var address = $(this).children("a").attr("link");
//This line loads the address and then runs the pageLoad function when it has completed
$('#mainStage').load(address, function() {
pageLoad();
});
});
If this doesnt work it may be because the html is loaded dynamically. In this case you need to use .on, see this link here.
In response to Brett's comment below ive put together a jsfiddle showing .on in action here. Also i added .preventDefault as this could cause a problem.
try with
$('.nameTitle a').click(function() {
It can be that you're trying with a browser which accepts click only on 'a' tags, albeit they're getting rare hopefully.
The 'click' event will never be raised on your div, since there is an inner a element with an href defined. Once you click, the event will be raised on the anchor link first which will, by default, redirect to the location specified by the href. In order to get this working, catch the click when it is raised at the a:
$('.nameTitle a').click(function(e) {
e.preventDefault(); // prevent browser from following href
alert('');
$('#mainStage').load("contacts_add.html", function() {
pageLoad();
});
});
Demo -- Commented out the load, since that page isn't on this server. Also notice I changed your a element to have attribute href instead of link.
I have 2 questions
I am using the hashchange plugin .... so I want to know would a function as below, be called everytime a hashchange occurs... because I have something like that in my code and the code function apparently doesnt seems to be called
$(document).ready(function()
{
// function here
});
On the other have if I remove the hashchange as in If i make http://abc.com/a.htm#http://abc.com/b.htm as http://abc.com/b.htm
the code works fine
the problem is the structure of my pages is a bit different .... here is the fiddle with the page structure that explains on a higher level what I am trying to achieve jsfiddle.net/vBKWd/9 ... on hash change jus the div c on my page 1 gets replaced by page 2 and vice versa .... and the js function that I have shown below is getting called only once and not after hashchange
Or is therre any way I can bind the function with the div so that whenever the div is replace the function get called?
No, a ready handler is only called on document ready, not on hash change. You should use the hashchange event for that, instead:
$(window).hashchange(function () {
// function here
});
Sample: http://jsfiddle.net/vBKWd/2/
In document ready wirte code below
$(window).bind('hashchange', function () {
//code here
});
use live in this case
$(document).ready(function()
{
$(selector).live(hashchange, function(){
// your code goes here
});
});