jquery show() question

I have a script that builds a dynamic div with contents. The button that initializes the build uses an onclick command and a ajax call to retrieve the开发者_高级运维 appropriate info, then builds the div. This all works great, it builds the div, and jquery shows the div and the button changes to the close button. The problem now is that the button still has the onclick command attached to it, and I was to strip this command off, and reapply it if the user wants to view the information again.

The button code on initial load:

<img class="showPixFeature hidden" id="butShowImage_<?php echo $row_rsFeatureAds['AdID']; ?>" src="../images/class_see_more.png" align="absmiddle" onclick="getRemoteInfo('PicDetailFeature_<?php echo $row_rsFeatureAds['AdID']; ?>')" style="cursor: pointer" />

Script that builds the div:

 function showImage(IDS, selectedID){
    var adType = new Array();
    adType = IDS.split("_");
    //alert(adType);
    var thumbs = new Array();
    thumbs = adType[1].split("~");
    var adID = thumbs[0];
    //alert(adType[0] + '_' + thumbs[0]);
    var picImage = document.getElementById(adType[0] + '_' + thumbs[0]);

        removeChildren(picImage);
        var picThumbs = document.createElement('div');
        arLen = thumbs.length;
        //alert(arLen);
        if(arLen > 2){
        for ( var i=1, len=arLen; i<len; ++i ){
            //alert(thumbs[i]);
            var thumbNail = document.createElement('img');
        thumbNail.src = "../images/listings/" + adID + "_" + thumbs[i] + "_sm.jpg";
        thumbNail.className = "thumbNails";
        thumbNail.id = adID + '_' + thumbs[i];
        picThumbs.appendChild(thumbNail);
        picImage.appendChild(picThumbs);
        addHandler(adID, thumbs[i], 1);
        }
        }
        var previewImageContainer = document.createElement('div');
        var previewImage = document.createElement('img');
        previewImage.id = 'full_' + adID;
        previewImage.src = "../images/listings/" + adID + "_" + "1_.jpg";
        previewImage.className = 'thumbNails';
        previewImageContainer.style.width = "700px";
        previewImageContainer.style.textAlign = 'center';
        previewImageContainer.appendChild(previewImage);
        picImage.appendChild(previewImageContainer);
        var closeButton = document.createElement('img')
        closeButton.src = '../images/close_pix.png';
        closeButton.id = 'close_' + adType[0] + '_' + adID;
        picImage.appendChild(closeButton);
        addHandler(adID, 'close_' + adType[0], 2);

                $("#" + adType[0] + '_' + adID).show('blind', {}, '1300'); 
                $("#butShowImage_" + thumbs[0]).attr("src", "../images/close_pix.png");
                $("#butShowImage_" + thumbs[0]).removeClass('hidden').addClass('shown');  
        }

Is there a way of stipping that onclick command off?

Thanks for you help!

---

I prefer to .delegate() and .undelegate() methods for binding event stuffs like that. Delegate is little bit different from the .bind() and .live() methods

Here is the great explaination about the diffrences http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/

kep it in mind :)

---

There are several issues I would fix with your code. First and foremost is to separate your functionality from your markup. This means removing the onclick events that you are firing through your elements. Now, this gets more complicated because you are passing PHP vars through your markup as well.

So your issue can be broken down into to sections.

• Removing event handlers from your markup. This is, among other things i'm sure, a poor way to organize functionality.
• A more robust means of communicating between JavaScript/PHP. In order to really take advantage of the web-based environment it will save you a lot of trouble passing variables in a more organized fashion. I would recommend looking into pairing Ajax with JSON. jQuery has some good implementations of both of these ($.Ajax() | $.parseJSON()).

---

The primary goal here is to clean up your markup to make it more readable, and better contain the different functions of your application - Functionality, Style, and information.

First, clean up your element a bit by removing the onclick event listener

<img src="example.jpg" id="someId_<?php echo id;?>;" class="showPixFeature" />'

Second, attach your event listener in whichever fashion you would like. Use $.delegate if you are dynamically generating the images. Use $.bind if you are not.

$('.showPixFeature').bind('click', function(){ 
    // this function will execute everytime an element is clicked
    // you have access to the element ID here via 'this' because
    // the functions context is the element that fires it
    alert($(this).attr('id'));
 });

You can then remove the bound event with $.unbind() API. OR $.undelegate if you are using delegate. From here we can add an ajax call to

$('#my-element').unbind('click');

---

You could use .one(). It's the same as using .bind(), and it unbinds it after it's used once.