jQuery hover function fails in specific case - javascript

I have the following function:
$('[data-toggle=popover]').hover(
function () {
$(this).popover('show');
}, function () {
$(this).popover('hide');
}
);
It works on this link (displays popover):
<p class="pull-right" style="margin-top: .5em;">
<i class="fa fa-question-circle fa-2x" data-toggle="popover" data-placement="left" title="Export Sets Help" data-content="foo"> </i>
</p>
but not this one (nothing fires):
<span class="green" data-toggle="popover" data-placement="left" title=""
data-content="foo" data-original-title="Status Detail">
<i class="fa fa-check"> </i>Success
</span>

The later link was created via a datatable row so the function actions were not attached. Adding the function to fnDrawCallback worked.

Related

alert sometimes work sometimes doesn't work in JS

I have a problem with Javascript. I have a database. I query my database to a form. I reference id to JS function(like this show_modal();). When I click button function works but sometimes doesn't work? Why? Sometimes alert shows the value of functions sometimes nothing does.
HTML
<div class="product-card--body">
<div class="card-image">
<img photourl"]?="" src="<?=$value["/>
" alt="">
<div class="hover-contents">
<a class="hover-image" href="product-details.html">
<img photourl"]?="" src="<?=$value["/>
" alt="">
</a>
<div class="hover-btns">
<a class="single-btn" href="cart.html">
<i class="fas fa-shopping-basket">
</i>
</a>
<a class="single-btn" href="wishlist.html">
<i class="fas fa-heart">
</i>
</a>
<a class="single-btn" href="compare.html">
<i class="fas fa-random">
</i>
</a>
<a class="single-btn" data-target="#quickModal" data-toggle="modal" href="#">
<i class="fas fa-eye" id="get_arr_id" onclick="show_modal(<?=$value[" productid"]?="">
); ">
</i>
</a>
</div>
</div>
</div>
</div>
JS
function show_modal(id){
var sendData = new FormData();
sendData.append("id", id);
alert(id);
}
Click on an a tag can be conflict with onclick event on an i tag.

onClick event is being caught by the parent element along with the clicked element

I have a div and inside it there are some elements.
my parent div has a test() function by using onClick.
in inside parent div there is a quickView() function by using onClick.
now, when I click on quickView() function, test() function fired .
<div onClick="test();" class="product-inner">
<h5 class="product-title height-40-px">
title
</p>
</h5>
<hr class="mt8 mb8">
<div class="product-meta">
<ul class="product-price-list">
<li><span class="product-save dir-to-right"><strong>7500</strong></span>
</li>
<li><span class="product-old-price dir-to-right">120,000</span>
</li>
<li><span class="product-price">%95</span>
</li>
</ul>
<hr class="mt0 mb0 mr6 hr-blue">
<div class="col-md-12 mt10">
<span class="col-md-6">
۹ <i class="fa fa-users"></i>
</span>
<span class="col-md-6">
<p class="font-size-12 display-inline">
zone
<i class="fa fa-map-marker"></i>
</p>
</span>
</div>
<ul class="product-actions-list mt35">
<li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730);" data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart <i class="fa fa-shopping-cart"></i></a>
</li><li>details <i class="fa fa-eye"></i>
</li>
</ul>
</div>
</div>
Use event.stopPropagation() to prevent the click event from propagating to the parent. This is how you use it.
P.S. IE supports e.cancelBubble instead of e.stopPropagation()
function quickView(value, e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
console.log(value);
}
function test() {
console.log('test Fired');
}
<div onClick="test();" class="product-inner">
<h5 class="product-title height-40-px">
title
</p>
</h5>
<hr class="mt8 mb8">
<div class="product-meta">
<ul class="product-price-list">
<li><span class="product-save dir-to-right"><strong>7500</strong></span>
</li>
<li><span class="product-old-price dir-to-right">120,000</span>
</li>
<li><span class="product-price">%95</span>
</li>
</ul>
<hr class="mt0 mb0 mr6 hr-blue">
<div class="col-md-12 mt10">
<span class="col-md-6">
۹ <i class="fa fa-users"></i>
</span>
<span class="col-md-6">
<p class="font-size-12 display-inline">
zone
<i class="fa fa-map-marker"></i>
</p>
</span>
</div>
<ul class="product-actions-list mt35">
<li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730, event); " data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart <i class="fa fa-shopping-cart"></i></a>
</li><li>details <i class="fa fa-eye"></i>
</li>
</ul>
</div>
</div>
Click events are bubbling up from the inner element clicked up to the document root going through all the parents of the clicked element. in order to stop it from propagating up you should use - event.stopPropagation();
That's how event bubbling works. First the click event is triggered on the element that actually was clicked (a.btn.btn-cart in your case) and then it goes upwards and reaches the parent div with test(). You can prevent further event propagation by passing an event to your quickView() function and calling event.stopPropagation(). Then, your HTML should look like this:
<a class="btn btn-cart btn-sm popup-text" onclick="quickView(event, 18730);">Cart</a>
And your JavaScript function:
function quickView(event, number) {
event.stopPropagation();
console.log(number) // Do some stuff with the passed ID.
}

Bootstrap Tooltips have disabled parts of my javascript

So here is a issue I am experiencing that is driving me nuts. As soon as I enable Bootstrap tooltips on my tags, the custom JavaScript I have won't trigger. If I remove the Bootstrap code that triggers the tooltip from the tag, everything works. JSFiddle Example
Working Example (remove: data-toggle="tooltip" data-placement="left" title="Parent Title Text." and it will work):
<li>
<a class="toggle-data-options" data-toggle="tooltip" data-placement="left" title="Parent Title Text.">Parent
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: inline;"></span>
<span class="glyphicon glyphicon-chevron-down" style="display:none;"></span>
</a>
<div class="data-options" style="display: none">
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 1 Text">Child Item 1</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 2 Text">Child Item 2</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 3 Text">Child Item 3</a>
</div>
</li>
When you enable the bootstrap tooltip it inserts the tooltip <div> immediately after .toggle-data-options.
.data-options is no longer the .next() element, so there is no match. Use .nextAll() instead:
$(document).ready(function () {
$('.toggle-data-options').on('click', function () {
$(this).nextAll('.data-options').toggle('fast');
$(this).toggleClass("active");
$(this).find('span').slideToggle(0);
});
});
JSFiddle

Angular JS : Scope values is not displayed in H1 tags

i have this template:
Problem is that, i am able to ng-if, but statement
<h2>{{$verification.state}}</h2>
Does not provide any visible output (H2 tag is empty, without text)
<div ng-controller="UsersCtrl" ng-init="verifyUser()" class="jumbotron">
<!- Verification Progres Icon-->
<p class="lead">
<i ng-if="verification.state == 'progress'" class="fa fa-thumbs-o-up fa-5x"></i>
<i ng-if="verification.state == 'success'" class="fa fa-thumbs-o-up fa-5x"></i>
<i ng-if="verification.state == 'error'" class="fa fa-exclamation-circle fa-5x"></i>
</p>
<!- Verification Progres Text Description-->
<h2>{{$verification.state}}</h2>
<h2>{{$verification}}</h2>
<!- Verification Progres Buttons-->
<p>
<a ng-if="verification.state == 'success'" class="btn btn-lg btn-success" ng-href="#/users/login">
Let me to login!
<span class="glyphicon glyphicon-ok"></span>
</a>
<a ng-if="verification.state == 'error'" class="btn btn-lg btn-success" ng-href="#/users/verify/token/{{verification.token}}">
Try it again
<span class="glyphicon glyphicon glyphicon-exclamation-sign"></span>
</a>
</p>
</div>
In controller I'm setting up values to templet like this:
// set initial progress state
$scope.verification = {
state:"progress"
};
How can I pass correctly and display values to the:
<h2>{{$verification.state}}</h2>
Thanks for any help.
Omit the dollar sign:
<h2>{{verification.state}}</h2>
Instead of {{$verification.state}} use {{verification.state}} it should work

Knockout auto click when the page became active

I'm trying to use data-bind click for one my spans, but when I'm trying to do it, the function start when the page became active, and don't wait for user press.
Any idea why???
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 rate">{{rate}}
<span class="fa fa-fw fa-lg fa-edit" data-bind="click: $root.edit($parent ,$index())"></span>
<span class="fa fa-fw fa-lg fa-times" data-bind="click: $root.delete($parent ,min)"></span>
</div>
If you want to pass additional arguments to your click handler function need to wrap your function calls into anonymous functions:
<span class="fa fa-fw fa-lg fa-edit"
data-bind="click: function () { $root.edit($parent ,$index()) }"></span>
<span class="fa fa-fw fa-lg fa-times"
data-bind="click: function () { $root.delete($parent ,min) } "></span>
See also in the documentation: Note 2: Accessing the event object, or passing more parameters

Categories