Question

我有一个用内容构建动态div的脚本。初始化构建的按钮使用onclick命令和ajax调用来检索相应的信息，然后构建div。这一切都很好，它构建div，jquery显示div，按钮更改为关闭按钮。现在的问题是该按钮仍然附加了onclick命令，我将关闭此命令，如果用户想要再次查看该信息，请重新应用它。

初始加载时的按钮代码：

<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" />

构建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');  
        }

是否有一种方法可以关闭onclick命令？

谢谢你的帮助！

Answer 1

我更喜欢.delegate（）和.undelegate（）方法来绑定类似的事件。委托与.bind（）和.live（）方法

略有不同

这是关于差异的重要解释 http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/

记住这一点：）

Answer 2

我会修复您的代码有几个问题。首要的是将您的功能与标记分开。这意味着删除您通过元素触发的onclick事件。现在，这变得更加复杂，因为您也通过标记传递PHP变量。

因此，您的问题可以分解为各个部分。

从标记中删除事件处理程序。除此之外，我确信这是一种组织功能的不良方式。
JavaScript / PHP之间更强大的通信方式。为了真正利用基于Web的环境，它将以更有条理的方式为您节省传递变量的麻烦。我建议您考虑将Ajax与JSON配对。 jQuery有两个很好的实现（$.Ajax() | $.parseJSON()）。

这里的主要目标是清理标记以使其更具可读性，并更好地包含应用程序的不同功能 - 功能，样式和信息。

首先，通过删除onclick事件侦听器

来清理元素

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

其次，以您希望的方式附加您的事件监听器。如果要动态生成图像，请使用$.delegate。如果不是，请使用$.bind。

$('.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'));
 });

然后，您可以使用$.unbind() API删除绑定事件。如果您正在使用委托，请$.undelegate。从这里我们可以添加ajax调用

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

Answer 3

您可以使用.one()。它与使用.bind（）相同，并且在使用一次后将其解除绑定。

jquery show（）问题

3 个答案: