Reputation: 1024
I am working with a video preview system. my source code snippet is
<li id="liVideoList">
<div class="thumbitem">
<div>
<a>
<img alt="" src="images/download.png" onclick="download('ID')" title="Download" />
</a>
</div>
<img class="imagThumb" alt="Thumbs" class="thumb" src="#Path#" />
</div>
</li>
There is a function to preview the video on clicking the li.It is dynamically doing and no issue with that.But if i clik on the download button which is inside the li, both the functions of li and download button is working, which means the preview is changing undesirably. to avoid this I added the below function after the code of dowload
event.stopPropagation();
and the code looks like
function Download(Id) {
$.ajax({
type: "POST",
url: "MyWebMethods.asmx/Download",
data: { "Id": Id}
}).complete(function (data) {
});
event.stopPropagation();
}
but still both the functions are working
Upvotes: 6
Views: 61030
Reputation: 337713
Firstly your HTML is invalid, as your a
element has no name
or href
attribute. Secondly, if you're using jQuery for logic, you may as well use it to hook up your events:
<li runat="server" id="liAssetList">
<div class="asset_thumbitem">
<div class="thumboptions" style="display: none;">
<a href="#"><img alt="Download" src="images/download_icon.png" data-asset="#UUID#" title="Download" /></a>
</div>
<img class="assetlist_imagThumb" alt="Thumbs" class="asset_thumb" src="#ThumbnailPath#" />
</div>
</li>
$('.thumboptions a').click(function(e) {
e.stopPropagation();
e.preventDefault();
var assetId = $('img', this).data('asset');
$.ajax({
type: "POST",
url: "ClientMethods.asmx/DownloadAssets",
data: { "AssetId": assetId}
}).complete(function (data) {
// do something..
});
});
Upvotes: 4
Reputation: 74738
You can change this:
DownloadAsset(AssetId)
to this:
DownloadAsset(AssetId, event)
Upvotes: 2
Reputation: 73966
You can do this:
function DownloadAsset(AssetId, e) {
if (!e) var e = window.event
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
// your ajax call
$.ajax({....})
}
Where e
refers to the event in all browsers and you can access the event.
Upvotes: 18
Reputation: 4844
You may also need to return false
from the DownloadAsset
function
Upvotes: 0