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).
Related
I'm building a site where a user has to agree to terms and conditions. The checkbox is enabled after scrolling to the end of the box. Here is the code:
<script type="text/javascript">
$(function() {
$('#rules_box').scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - $(this).height() - 15 ) {
$('#iagree').removeAttr('disabled');
}
});
});
</script>
This works in most browsers. However some refuse to work. Even if I just have
$('#iagree').removeAttr('disabled');
by itself without scroll conditions. This page is running many other javascripts that are working.
Some said it didn't work on their Mobile, and one said it didn't work on Firefox although it worked on my Firefox.
Is jQuery too finicky to work? Does this mean I have to do it another way?
EDIT:
you're quick to mark as a dupe, but this question hasn't been answered yet.
Problem persists in same select browsers, see updated code
$(function() {
$('#rules_box').scroll(function () {
alert('something');
$('#iagree').prop("disabled", false);
});
});
Does not fire alert or change checkbox state
For checkbox elements, you should use .removeProp() instead of .removeAttr()
$('#iagree').removeProp('disabled');
Also see: https://api.jquery.com/removeAttr/ and https://api.jquery.com/attr/
Please use
$('#iagree').prop("disabled", false);
Use .prop('disabled',false) instead of removeAttr('disabled').
related question
I've Problems with thise Code, it's working fine in Firefox and Internet Explorer but it doesn't work with Opera and Chrome Browsers...
<script>
function planetselect()
{
optionen=document.getElementById('pstart').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
optionen=document.getElementById('pdest').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
}</script>
Change
optionen[i].setAttribute('selected','selected');
to
optionen[i].selected = true;
More generally, avoid the use of setAttribute to change DOM properties. Sometimes it works, sometimes it doesn't.
From the MDN :
Using setAttribute() to modify certain attributes, most notably value
in XUL, works inconsistently, as the attribute specifies the default
value. To access or modify the current values, you should use the
properties. For example, use elt.value instead of
elt.setAttribute('value', val).
Did you make sure you close the <script> tag? I can't really see a problem with your code that you posted, so either you didn't close your tag, or your optionen or options variables aren't there or valid
Also too, you should know that chrome has a javascript console that should show you any errors you have. To open it, it's ctrl-shift-j. That should help you a lot.
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'); }
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.
I have a script for display of Google suggestions. The script also allows to come down in the suggested list using the arrow keys. When you do so the "text" is filled within the input field. The code for this is:
$("#inp").live("keyup", function(e) {
var search_terms = $("li.current").text();
if(e.keyCode==40)
{
$("#inp").val(search_terms);
}
if(e.keyCode==38)
{
$("#inp").val(search_terms);
}
});
The complete script is over here: jsbin
The problem is that IE8 does not support "oninput" so first of all please test this in IE and replace "oninput" with "onpropertychange" which is an IE only event (so it seems) After doing that you will notice that the script does not respond proper when coming down in the suggestion list. However if you remove the above code than all works very well. But I really need the above code to function in IE, so what should I change in order to make it work properly?
update jquery to latest version :P