Question

i have this problem that i need to get the value of href and pass it to a button.

is this correct format of jQuery?

$(function() {
    var getValue = $('#theLink').getAttributeNode('onclick').value;
    $('.yt_holder').live('click', '.videoThumb4', function(){ 
    $(".videoThumb4").ytplaylist({
        holderId: 'ytvideo4',
        html5: true,
        playerWidth: '520',
        autoPlay: false,
        sliding: false,
        listsliding: true,
        social: true,
        autoHide: false,
        playfirst: 0,
        playOnLoad: false,
        modestbranding: true,
        showInfo: false
    });
    });
});

the button was working but it only play the first video on his list.
the link of the website is here http://cocopop12.site11.com/search/index.php

now the button is this.

<input class="videoThumb4" onClick="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '" type="button" name="previewSel" value="Preview" id="previewbut" />

is that correct? that i need to do a onclick http://www.... blabla?

the <a href> that i like to make a button is this.

<?php
echo '
<a class="videoThumb4" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '" id="link">
' . $yValue['description'] . '
</a>
';
?>

how can i use .each for the button {Preview}?
how can i put the value in the button just like –when i click this href it automatically play the video? but the button it just play the first video but not the second video.
this i want to make it like a button.

thank you for your time.

Answer 1

So if I have understood your question correctly, you want to have the ‘Preview’ button follow the nested anchor link when it is clicked. You can’t just do this by setting the onclick attribute, since this specifies a script to run when an event is raised — not a link to follow.

If the a link still exists, you can have the button trigger the click on the a link when it is clicked (you already have a handler for the a link click).

First, get rid of the onClick="..." in the button.

Then, add the following javascript code to trigger the link click.

$('.yt_holder').on('click', '.videoThumb4', function(e){
    e.preventDefault();
    if($(e.target).is('input[type="button"]')){
        $(this).siblings("a.videoThumb4").first().click();
    }
}

This will bind to the ‘click’ event of all .videoThumb4 elements (currently in the document or loaded in the future), check if they are html buttons, then trigger the click on the corresponding anchor link below (which is handled by your code in your question). Note .live() is deprecated, and you should use .on() as shown for similar functionality.

---

Update: Your new code should look something like this

$(function() {
    $('.yt_holder').on('click', 'a.videoThumb4', function(e){
        $('.videoThumb4').ytplaylist({
            holderId: 'ytvideo4',
            html5: true,
            playerWidth: '520',
            autoPlay: false,
            sliding: false,
            listsliding: true,
            social: true,
            autoHide: false,
            playfirst: 0,
            playOnLoad: false,
            modestbranding: true,
            showInfo: false
        });
    });
    $('.yt_holder').on('click', 'input.videoThumb4', function(e){
        e.preventDefault();
        $(this).siblings("a.videoThumb4").first().click();
    });
​});​