The question has not yet been answered with a solution but it still not working for me.
The problem is that I want do disable links if a save button is not clicked (trying to override the onbeforeunload function).
My page structure looks like this :
<ul class="nav">
<li><a class="noclic" href="..."></a>
</li>
<li><a class="noclic" href="..."></a>
</li>
<li><a class="noclic" href="..."></a>
</li>
</ul>
<button type="button" class="save">Save</button>
<form>...</form>
<button type="button" class="save">Save</button>
And here's my jQuery:
$(document).ready(function () {
$('.noclic').on('click', function (e) {
//(I also display a confirm modal)
e.preventDefault();
var $this = $(this);
console.log("locked");
});
$('.save').click(function () {
$('.noclic').off('click');
console.log("unlocked");
});
});
When I click on the nav links, the console shows the "locked" message.
But when the button is clicked, the "unlocked" console shows quickly before vanishing, and the event.preventDefault is still running.
What am I doing wrong ?!
Two issues
1) Your buttons are "submit" buttons, thus, when you click, the page is reloaded. You have to change them to
<button type="button">
2) Your buttons have class "save" but you use $( "#save" ) instead of $( ".save" ) to reference them
Related
I use bootstrap tabs
http://getbootstrap.com/javascript/#tabs
and I create hide button like this
<li role="presentation"> Options <span onclick="$('#tab_6').hide();" class="tab_hide_btn">X</span></li>
If I clicking the hide span, tab is opened and hidden at the same time, because both onclick action are on the same layer
You can add a listner in your Javascript to hide tab:
$('li a[role="tab"] span').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).parents('li').hide();
});
Moreover Bootstrap provides an helper class to display a close button, so your html could be:
<li role="presentation">
<a href="#tab_content_6" id="tab_6" aria-controls="tab_content_6" role="tab" data-toggle="tab">
Options
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</a>
</li>
Try doing something like this in a <script> tag:
$('span').on('click', function(e) {
$(this).parents('li').hide();
});
jsbin: http://jsbin.com/pekoduwusi/edit?html,js,output
I've updated jsbin with the functionality you're looking for. Its quick and dirty but does the trick. The concept is you want to get the href of the parent span then find the content with that id striping away the # character. Then, hide that content.
jsbin: http://jsbin.com/cutiwibora/edit?html,js,output
Have got an button in nav, which on click event is supposed to display:block an ul which is initially set to display:none
HTML -
<i class="mdi-navigation-menu small right" id="lines3"></i>
</nav>
<ul class="collection center" id="drop-navv" style="display:none">
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
</ul>
Js -
$(document).ready(function() {
$('#lines3').on('click', function() {
$("#drop-navv").css("display", "block");
});
// other click event
});
But as soon as I click button it works, but immediately page get reloaded! Its been hours but still cannot figure out why its happening!! PS: Am using materialize framework. And other click event as mentioned in comment is working.
You're going to need to prevent the default on your click handler.
So, first I'd change the href to be href='#' and then add this.
$('#lines3').on('click', function(e) {
e.preventDefault();
//your other code here
});
This will prevent the link from going anywhere when someone clicks it.
I have 2 tabs each of them displays different details. On clicking second tab, I have created a button clicking on which will display certain details. But would like to know if there are any method that calls the function directly when the tab is clicked.I tried activate function but it dint work.
$(function() {
$( "#tabs" ).tabs({
activate: function( event, ui ) {
fn.my_function(); }
});
});
Also I was wondering whether using activate function would be a good choice as the function is specific to second tab only.
Here is my code for the tabs :
<div id="tabs">
<ul>
<li>DEMO</li>
<li><a href="#tabs-2">Details
</a></li>
</ul>
<div id="tabs-1">
<p><font color="blue"> Code </font>: Code number</p></br>
<div id='popup-close'>Close</div>
</div>
<div id="tabs-2">
<p></p>
<input type="submit" name="call_function" id="call_function" value="Click for details" />
<table id='content'></table> // this is to display the details listed by the function in the table format.
<div id='popup-close1'>Close</div>
</div>
Any pointers to solve this would be appreciated.
Basically you can trigger function for the specific tab by just adding an id to it:
<li><a id="tab1" href="#tabs-1">DEMO</a></li>
...
$("#tab1").click(...);
Another option is to write a proper selector to get first/second/n-th... <li> element:
$("#tabs ul li:nth-child(2)").click(...)
Using Firebug I have found that the Dynatree plugin changes the following code:
<li id="id3.1" class="expanded">Menu 1
<ul>
<li id="id3.1.1">Sub-menu 1</li>
</ul>
</li>
To this:
<li class="">
<span class="dynatree-node dynatree-exp-c dynatree-ico-c">
<span class="dynatree-connector"></span>
<span class="dynatree-icon"></span>
<a class="dynatree-title" href="#">Sub-menu 1</a>
</span>
</li>
So when I try to make a click event on the id="id3.1.1" nothing happens because this id doesn't exist anymore.
I made a search here and found the onActivate option that will make my click happen on the menu:
$("#treeMenu").dynatree({
onActivate: function(node){
var menuTitle = node.data.title;
alert(menuTitle);
}
});
My question: Is this the only way to do the click event using Dynatree?
Well I think that is the best option, because it uses the API of the plugin, but of course you could still attach an event to the <a> like this:
$('a.dynatree-title').live('click', function(e){
//here e.target is the link you have clicked
});
I'm trying to register a click event for a menu list button identified by a class, but it doesn't seem to be firing. My code is as follows:
<body>
<!-- jQuery Simple Drop-Down Menu http://javascript-array.com/scripts/jquery_simple_drop_down_menu/# -->
<div id="dropDownDiv" style="width: 908px; height: 24px; margin: auto auto; background: #324143;">
<ul id="jsddm">
<li>Item 1
<ul>
<li><a class="btn myOtherClass" href="#">Button 1</a></li>
<li><a class="btn myOtherClass"href="#">Button 2</a></li>
</ul>
</li>
<li>Item 2
<ul>
<li><a class="btn myOtherClass" href="#">Button 3</a></li>
<li><a class="btn myOtherClass" href="#">Button 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
And in my script I have the following:
/* Register the click event for menu buttons */
$('.btn').click(function () {
alert("You clicked a button");
});
The alert never fires and I'm not sure why, any help is appreciated.
UPDATE:
The code in the link works for me to, not sure why it's not working in my project. I'm in an Eclipse PHP Project environment with Java resources enabled. I tried my project in Chrome and Firefox, not working for either. I'll check the rest of my script.
UPDATE 2:
Looks like Shef's recommendation about wrapping in a .ready function did the trick. I still don't understand why it needs that to work, "c=smiles"'s link worked without it.
Works fine for me, check it out. Maybe you didn't include jQuery? Or, you are not wrapping your event listener bind code inside a document ready like this:
$(document).ready(function(){
$('.btn').click(function () {
alert("You clicked a button");
});
});
are you using stopPropagation or return false in another click event that may have prevented the click event from happening?
Is the jQuery used after jQuery has been loaded?
Is the in the DOM at the time of binding? (use delegate instead of click if not, or bind after loading)