jQuery onclick placer doing nothing - javascript

I have an input on my index page:
<input type="button" name="goReplaceAll" value="Go" id="allReplaceGo" style="cursor:hand;" />
And an onclick call from jquery:
$(document).ready(function() {
$('#allReplaceGo').click(replaceAll);
});
function replaceAll(){ alert('a'); }
When I click the button, nothing happens. When I instead use onclick="replaceAll()" within the HTML, I get an error: Uncaught ReferenceError: replaceAll is not defined
I am unable to figure out a connection between these errors, or any possible cause.
The code is currently live at http://www.texturepacker.net
Edit: Looks like I get two different results in Firefox and Chrome, Chrome does nothing while Firefox alert('a')'s once the page loads. Now I'm just plain confused?
Edit: Seemingly an unrelated syntax error later in my code was breaking the call. Now replaceAll() is called when the dom loads, my question is now why isn't replaceAll() being launched onclick and instead once the dom loads, am I missing something obvious?

Look like a syntax error here...
Line 196 in you script file says
$(this).("src",tmpSrc);
It is supposed to be
$(this).attr("src",tmpSrc);
Fix that and it should be all fine..
Also on line 7
$('#allReplaceGo').live("click",replaceAll());
is supposed to be
$('#allReplaceGo').live("click",replaceAll);
Also as of version 1.7 .live() is deprecated. try using .on() instead

That happens, probably, because the function replaceAll is outside the jQuery scope.
Try to put her inside the $(document).ready scope.

Your code should look like
$(document).ready(function() {
$('#allReplaceGo').click(function(){
replaceAll()
});
});
function replaceAll(){ alert('a'); }

Related

jquery code is not working in safari browser

I have this code in my js file
$.post(storeurl+"/ajax/ajax-action.php", {action: 'removefromsession', id:did, pid:pid}, function(result){
if(result){
obj.closest("span").remove();
}
});
Here is the fiddle.
This code is working in firefox and chrome, but not working in safari, even i did not get any error in console of safari. Is there any solution to make working this code in safari?
Try to wrap the this with $() since .closest() is a jquery function not a plain old javascript's.
$(this).closest("span");
this inside $.post will refer the window object. I think probably this post call might be inside of a click event or something. Cache the this object of the clicked element in a variable then use it inside of success call back.

Something causing interference

So I've got the following code that works in jsfiddle, but not on the actual website, which leads me to believe that the only way I'm going to get it working is for someone with more experience than I to look through the source and see what's interfering.
<script>
$(document).ready(function(){
var $elements = $('body').children('div[class^=class]').on('click', function () {
$elements.removeClass('classname')
.not('.' + this.className)
.addClass('classname');
});
});
</script>
Website: http://sinfulgurotesque.tumblr.com/recs
Edit: I've removed a section of code from the website that had nothing to do with this part. (It was the deprecated code, and it didn't offer much in terms of functionality anyways.)
You're using jQuery 1.10.1 in your page, and the error you're getting:
jquery.style-my-tooltips.js:26 Uncaught TypeError: undefined is not a
function
is referring to the .live() function used by the plugin which was removed in jQuery 1.9
$(".smt-current-element").live("mouseout mousedown click",function(){
It looks like you're calling depracated JS functions. I got:
TypeError: $(...).live is not a function
when opening your page. Try changing .live() to .on()
Like so
$("body").on("mouseout mousedown click", ".smt-current-element", function(){...

Why is my onclick event not registered in Firefox?

I have a list item with an onclick event. It runs in Chrome and Internet Explorer, but not Firefox. Any suggestions?
<li onclick="alert('test');">test test<br></li>
This works fine for me in Firefox.
Check this:
JavaScript is enabled in your browser.
Try adding a return false; statement in your tag.
Or a function like this:
function test() {
//your code here
return false;
}
Or use this:
Link
or this
Link
I was trying to minimize my html code to send a complete code to simulate the error as Boris Zbarsky requested. Then I found my mistake.
I was using marquee tag which has been deprecated. Now I am going to use jQuery instead of it.
thx
In Firefox, the event object is not global. You have to access it within your script tags not in html.
onclick works likes this
<li id="alert">test<br></li>
<script>
document.getElementById("alert").addEventListener("click", function( event ) {
alert('test');
}, false);
</script>
Attributes can be ignored by Firefox when it is served invalid HTML, use
https://validator.w3.org/
to clean up the HTML.

mootools and jQuery conflict

I've got a simple form in a page that is loading Mootools and JQuery. JQuery is in no conflict mode, which seems like it ought to cause no problems.
There's a form element called "name"--
<input class="required" id="sendname" name="sendname" value="">
And I'm trying to attach a click event to it using Mootools to update something else when the name box is clicked:
$('sendname').addEvent('click', function(e){
// do stuff.
});
The problem is that the click event never gets added.
This error appears on load:
Uncaught TypeError: Cannot call method 'addEvent' of null
When I try to interact with the element in a js console, I get the following error:
> $('sendname').setProperty('value', 'test');
TypeError: Object sendname has no method 'setProperty'</strike>
EDIT: the previous was fixed by loading a newer Mootools. However, the click event still isn't functioning properly, though it throws no errors or warning.
This code works fine in almost any situation I've used it in. I assume there's some issue with jQuery conflicting, but the fact that the $ notation works seems to confirm that noConflict mode is operational. Any ideas?
You are targetting the element wrongly... I think this has nothing to do with a possible conflict.
In this case you need to add the hash for an id or a period for a class, like this:
$('#sendname').addEvent('click', function(e){
// do stuff.
});
Notice the # in #sendname
MooTools has Dollar Safe mode that automatically releases the $ to other libs as long as MooTools is loaded last.
If Dollar Safe mode is active, you need to use:
document.id('SomeElementID').someMethod()
What is happening in the example you are giving, is that you're using jQuery to select the element, and a MooTools method on the result. The thing is, jQuery returns the jQuery object which has no such 'addEvent' method on it. MooTools works on the actual elements so you need to select them with a MooTools query method first: $ == document.id or $$ == document.search
You can cache document.id to a var for convenience if you want:
var $M = document.id;
$M('sendname').addEvent(...)
As described in the comments to the OP, the issue was the load-order of the jQuery/Mootools scripts. The jQuery noConflict was being loaded too late, and causing problems. Please see jsfiddle -- http://jsfiddle.net/uSwzL/1/
Without any problem even loading jquery.js after other $ based library loaded:
<script>$=function(){alert('hell');}</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$.noConflict();
$();
alert(jQuery.trim(' hello '));
</script>
Even in php framework html template:
<script>
function on_doc_ready()
{jQuery(function($)
{$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
}
);
}
function load_jquery_ui()
{var s2=document.createElement('scr'+'ipt');
s2.setAttribute('onload', 'on_doc_ready();');
s2.src='/app/idm/statics/jQuery/js/jquery-ui-1.10.0.custom.min.js';
document.getElementsByTagName('head')[0].appendChild(s2);
}
function load_jquery_after_mootools()
{var s1=document.createElement('scr'+'ipt');
s1.src='/app/idm/statics/jQuery/js/jquery-1.9.0.js';
s1.setAttribute('onload', '$.noConflict();load_jquery_ui();');
document.getElementsByTagName('head')[0].appendChild(s1);
}
load_jquery_after_mootools();
<script>

Click event not worked in Firefox

I am using a jquery click function:
Button code
<input type="button" id="myButtton">
Jquery code
$(document).ready(function () {
$("#myButtton").click(function () {
alert("Mybutton");
});
});
This code works in Internet Explorer but does not work in Firefox.
What am I doing wrong?
In the code:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
I believe it's missing another closing brace:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
});
My best guess is that you have other input with the same ID? Try using classes instead, or use jQuery's CSS selector like $('input[type=button]') instead.
I'd also recommend installing FireBug plugin for FireFox if you haven't done so already (http://www.getfirebug.com/). It'll help you debug JavaScript issues like this, and a whole lot more.
Are you sure that element has an id attribute? Or does it have only a name attribute with a value of "myButton". In order to work cross browser the id attribute is mandatory, whereas name is optional (only IE and Opera AFAIK).
N.B.: My answer may seem idiot, but it was not the original poster that added the code example in the question (view edit history).

Categories