How to use live method with zclip plugin? - javascript

How to use live method with this -> http://www.steamdev.com/zclip/
Edit:
$(document).ready(function(){
$('a#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
i need to use live method cuz a#copy-description will be generate via javascript.

try to use livequery instead of live. That way you'll be able to bind zclip when it appears in the DOM.
$(document).ready(function(){
$('a#copy-description').livequery(function(){
$(this).zclip({ path:'js/ZeroClipboard.swf', copy:$('p#description').text();
});
});

Related

Android Browser .click() not working javascript

I'm trying to click a button programmatically with javascript. Using the following code works fine:
var pbutton= document.getElementById('psubmit');
pbutton.click();
but when I try it on my mobile browser it wont fire the click event. Is their another way to do this for Mobile Browsers?
You will need to implement jquery for this or use a simple javascript.
You can add following code to implement through pure javascript
document.getElementById('psubmit').click();
You can check jsfiddle here
or for jquery you can implement by
$(document).ready(function(){
$('#btn').click(function(){ alert("JQuery Running!");});
$( "#btn" ).trigger( "click" );
});
You can check jsfiddle here
For both this to work you need to have id property defined. And to implement jquery you will need to add jquery file in you code. Hope this helps. Cheers :)
You could use jQuery
$(function(){
$('#psubmit').click()
});
Try using jquery:
$('psubmit').live("click",function(){
//Function code here
});

Added Div not working click function

In my scenario , i have to use class to add div , this may easily solve with onClick function, but i require this to complete my task,
.click(function() is not working on new element , javascript /jquery may store element onload or what???
FIDDLE
<div class="add">
<div class="anyRow">Hello<hr/></div>
</div>
$('.anyRow').click(function(){
$('.add').append('<div class="anyRow">Hello</hr></div>')
});
You have to use on() method as the deprecated live() one, to delegate click for future new elements.
$(document).on("click", ".anyRow", function() {
$('.add').append('<div class="anyRow">Hello</hr></div>');
});
If you are using in real case (as in posted jsFiddle) jQuery v1.6.4, you should use .delegate() method:
$('.add').delegate('.anyRow', 'click', function () {
$('.add').append('<div class="anyRow">Hello</hr></div>')
});
-DEMO-
http://learn.jquery.com/events/event-delegation/
For older jquery versions you can use live function if html is changed dynamically (I saw you using an older jquery version in the fiddle)
$('.add').live( 'click', function () {
$('.add').append('<div class="anyRow">Hello</hr></div>')
});
The method bellow applies event handlers to elements even before they exist
$("#parent-element").on("click", "#new-element", function() {
// your code
});

Adding functions with jquery replace() markup

I have a jquery replace() putting in list items that I want to attach a function to. I don't know exactly how to do this though.
function replaceListItems(){ $('ul.options').replaceWith('<ul class="options"><li class="btn"><img src="btn.png" /></li></ul>');}
Here's the function I'd like to attach:
$("ul.options li").click(function(){myFunction()});
Seems like it gets removed if I assign it before the list items gets replaced/created.
Thanks in advance for the help!
-m
Replace:
$("ul.options li").click(function(){myFunction()});
with:
$("ul.options li").live('click',function(){myFunction()});
this way jQuery also attaches the click handler to the replaced/created elements.
Reference: http://api.jquery.com/live/
Demo: http://jsfiddle.net/CWH4D/
jsBin demo
function replaceListItems(){
$('ul.options').replaceWith('<ul class="options"><li class="btn"><img src="http://placehold.it/40x40/cf5&text=BTN" /></li></ul>');
}
$("ul.options").on('click','li',function(){
replaceListItems();
});
More on: http://api.jquery.com/on/

applying script to elements inserted via jquery .html()

i'm kinda new to scripting so this might be a bit basic, but i couldn't find an answer anywhere.
To improve my webpage loading time I made some HTML element load (via AJAX) and inserted only when a certain button is clicked, using the jquery .html() function.
That worked, but now all the jquery commands which referred to that element don't seem to apply. I'm guessing it's because the original commands were loaded before the new HTML?
For example, code like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').click(function(){
alert ("WORKED");
});
}
How do I make the #touchMe.click command apply to the new incoming HTML?
thanks a lot
Take a look at live()
$('#touchMe').live('click', function() {
Try -
$('#touchMe').live('click',function(){
alert ("WORKED");
});
Instead of
$('#touchMe').click(function(){
alert ("WORKED");
});
use
$('#touchMe').live('click', function(){
alert ("WORKED");
});
you use .live() or .delegate() function instead of click.
$(document).ready(function(){
$('#myButton').live('click', function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').live('click', function(){
alert ("WORKED");
});
}
note: the live on "mybutton" is not necessary in this example.

Refresh conent with JQuery/AJAX after using a MVC partial view

Using the following JQuery/AJAX function I'm calling a partial view when an option is changed in a combobox named "ReportedIssue" that is also in the partial view. The is named "tableContent".
<script type="text/javascript">
$(function() {
$('#ReportedIssue')
.change(function() {
var styleValue = $(this).val();
$('#tableContent').load(
'/CurReport/TableResults',
{ style: styleValue }
);
})
.change();
});
</script>
My problem is that after the jump to the partial view I lose the link to the javascript. I think I'm supposed to use the JQuery ".live()" but I'm unsure.
In short, I want to re-establish the link between my JavaScript and my combobox and after the inclusion of the partial view's HTML.
I hope I'm being clear enough,
Aaron
This answer is deprecated, see Mike's answer
As of jQuery 1.4 you can use the live handler with the change event. Simply change your code to work with it. If you are stuck with an earlier version of jQuery, you need to reapply the handler in the AJAX callback.
$(function() {
$('#ReportedIssue').live('change', function() {
var styleValue = $(this).val();
$('#tableContent').load(
'/CurReport/TableResults',
{ style: styleValue }
);
})
});
Since .live() is now deprecated. Use .on(). Or, in my success callback, I simply did a .load()
$('#container').load('index.php', '#right'); Worked like a charm.
Yes you should use live():
$('#ReportedIssue').live('click', function() {

Categories

Resources