Develop Reference

jquery script doesn't work for me

$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a").removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com"target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com"class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>
I want that the last a element is locked, and if you click on the 2nd button, the class locked will be removed from the last a element and I will be able to click on the link.
It deletes the class but I still can't click the link. How to fix that?
Also, is there are smarter way to do that...

This event binding isn't removed from the <a> when its class="locked" is removed:
$('a.locked').click(function(e) {
e.preventDefault();
});
At least with direct bindings like this, jQuery only uses the selector initially to attach the event handler to all matching elements. It won't recheck the selector when the event is later triggered. Currently, you'll have to do that check yourself:
$('a').click(function (e) {
if ($(this).hasClass('locked')) {
e.preventDefault();
}
});
Though, if you have an overall parent element, you can use a delegated binding and jQuery will then recheck the (2nd) selector for you when the event is triggered.
<div id="parent">
<a href="example.com" target="_blank" id="action2">
<!-- ... -->
</a>
<a href="example.com" class="locked">
<!-- ... -->
</a>
</div>
$('#parent').on('click', 'a.locked', function (e) {
e.preventDefault();
});

So, just removing a css class will not work in your case.
You should remove the event handler to allow the button to be clicked, something like this should work:
$("a.locked").on("click.locked", function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("a.locked").off("click.locked");
$("a").removeClass("locked");
});
});
Working jsfiddle.

Like this?
Check out this SO question to read more about the toggle function I used.
$(document).on("click", "#ToggleLock", function(e) {
$('#Continue').prop('disabled', function(i, v) {
return !v;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id='ToggleLock'>Unlock/Lock</button>
<button onclick="location.href='http://www.example.com'" type="button" id='Continue' disabled>Continue</button>
Let me know if I have greatly misunderstood the question.

Remove the class is not enough, since you added a click event to all $('a.locked') you need use .off() to remove the click event after removing the class. Also try to target the specific element, you could add id="btn_continue" to 2nd button. ($("a") will target all <a> which is not what you want to do)
Note:
$('a.locked').click(function(e) {
e.preventDefault();
});
$(document).ready(function(){
$("button.button2").click(function(){
$("#btn_continue").off().removeClass("locked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com" target="_blank" id="action2">
<button class="button2">
<span class="icon">CLICK HERE</span>
</button>
<br>
<br>
</a>
<a href="example.com" id="btn_continue" class="locked">
<button class="locked-button">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="icon">CONTINUE</span>
</button>
</a>

Bootstrap Popover is not working when rel is used

I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?

jquery simple onclick event

<a aria-expanded="false" data-toggle="tab" href="#pictures">
<i class="pink ace-icon fa fa-gift bigger-120"></i>
Pictures
</a>
I want to wire on click #picture event to alert some message so I add
$(document.ready(function() {
$("#pictures").click(function(){
alert('clicked!');
});
})
but this doesnt work, I've got no error messages inside firebug console.
Jquery is loaded before correctly.

In your html there is no element with ID pictures, change it, like so
$("#pictures").click(function(){
alert('clicked!');
});
// or use selector like this, if you can't change html
$('a[href="#pictures"').click(function(){
alert('clicked!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a aria-expanded="false" data-toggle="tab" href="#pictures" id="pictures">
<i class="pink ace-icon fa fa-gift bigger-120"></i>
Pictures
</a>
Update:
Also you have error in this line
$(document.ready(function() {
change it
$(function() {
// put your code
});

Did You try tout set the click handler on document?
jQuery(document).on('click', '#pictures', function(e) {
alert('clicked');
});
You also have to add :
id="pictures"
In your . Or an y other selector.

If you want to still use the #picture in href check on bellow code
jQuery(document).ready(function($) {
$("a[href='#pictures']").click(function(){
alert('clicked!');
return false;
});
})

Try this Demo, even changed some markup for the same.
$(document).ready(function() {
$("#pictures").click(function(){
alert('clicked!');
});
})

ng-hide show on-click event in AngularJS

I have in my index.html a div which initially must be hidden:
<div class="autocomplete" ng-show="div_show" ng-controller="SearchController">
And I need when I click on my Menu on the search link,the div to be shown,basically
ng-show="true"
So on my link I defined something like that:
<a class="list-group-item" ng-click="show()"><i class="fa fa-search fa-fw"></i> Search</a>
And in my controller the function :
$scope.div_show = false;
$scope.show =function(){
$scope.div_show = true;
console.log($scope.div_show);
alert($scope.div_show);
}
When I click on the link I have the alert value set to 'true'but the div is still hidden,
Any suggestions? Thank you!!!

To toggle the ng-show element, just assign the following directive on the Menu button:
ng-click="div_show = !div_show"
All this does is toggles the value of div_show between true and false.
Here's a plunker for a full demo.

Try something like this :
<a href="#" class="list-group-item" ng-click="div_show = true">
<i class="fa fa-search fa-fw"></i> Search
</a>
This will make sure the page is not getting loaded again and i will set the div_show to be true, only if it is in the scope.

Get ID name of a clicked element

This seems like it should be so simple but for some reason I can't get it working. I want to get the id of a clicked element.
The element:
<i id="fav6" onclick="changefave()" style="color: #DDD;" class="fa fa-star-o"></i>
The js:
function changefave(){
alert(this.id);
}
It's current returning, 'Undefined'.
Note: the element id is generated dynamically.
Thanks

You can change the onclick attribute of the <i> tag like:-
onclick="changefave(this);"
and the function like:
function changefave(obj) {
alert(obj.id);
}

Yoy can try this
function changefave(obj) {
alert(obj.id);
}
HTML
<i id="fav6" onclick="changefave(this)" style="color: #DDD;" class="fa fa-star-o">something</i>
DEMO

in html
<i id="fav6" onclick="changefave(this)" style="color: #DDD;" class="fa fa-star-o"></i>
in js
function changefave(this){
alert(this.id);
}
or by jQuery you can do
in html remove inline onclick
<i id="fav6" style="color: #DDD;" class="fa fa-star-o"></i>
and script will
$(document).ready(function(){
$("#fav6").click(function(){
alert($(this).attr("id");
});
});

Better not to do inline JavaScript. So, your HTML should be
<i id="fav6" style="color: #DDD;" class="fa fa-star-o"></i>
Then, in JavaScript:
$(function() { // waits for document and jQuery to load
$('#fav6').on('click', function() {
alert( $(this).prop('id') );
});
});

try something like this
HTML CODE
<i id="fav6" onclick="changefave(this);" style="color: #DDD;" class="fa fa-star-o"></i>
JAVASCRIPT CODE
function changefave(obj){
alert(obj.id);
}

You need to pass it along with the "this" pointer as argument in the function call .
Hence your code in html should be
<i id="fav6" onclick="changefave(this)" style="color: #DDD;" class="fa fa-star-o"></i>
And the javascript function should be
function changefave(ele)
{
// here ele refers to the called element
alert(ele.id);
}
Refer to this link to know more about 'this' https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this