Question

当我的页面通过用户点击我的一个复选框重新加载时，我的JS不会执行。

URL变量会附加到URL（大小，颜色，价格等等，具体取决于用户点击的内容），当发生这种情况时，JS会以某种方式未执行。

JS所做的是为我的UL创建一个名为SizeChicklets的类。此外，由于SaaS平台的限制，我只能使用jQuery 1.3.2。

在我点击任意一个框之前，这是我的框在成功加载页面时的样子：

当我点击任意一个框时，这是我的框在不成功的页面加载上的样子：

这是因为我附加到我的UL的课程是通过Javascript完成的。然后，该类正在被设计。但是，我希望JS在页面重新加载时执行，所以我没有这个问题。

首次到达“产品优化”页面时，我的网址如下所示：

.com/s?defaultSearchTextValue=Search&searchKeywords=*&Action=submit

然后，在单击其中一个框（值：9M）后，URL将更改为如下所示：

.com/s?defaultSearchTextValue=Search&searchKeywords=*&Action=submit&field_subjectbin=&field_brandtextbin=&field_price=&field_generic_text_2-bin=&field_generic_text_1-bin=&field_size_name=9M&searchRank=generic-one-desc-rank&searchSize=12&searchPage=1&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name

这是我的Javascript：

jQuery( document ).ready(function() {
    var sizeUL = jQuery('.binName').filter(function(){
        return this.innerHTML.trim() == 'Size';
    }).next("ul")
    sizeUL.addClass('SizeChicklets');
    /*Prepend and Append clear div*/
    jQuery('.binName').filter(function(){
        return this.innerHTML.trim() == 'Size';
    }).prepend('<div style="clear: both;">').append('</div>');
    /* AJAX SIZE SELECTOR */
    jQuery("li a", sizeUL).click(function() {
        if(jQuery(this).hasClass('SizeChickletSelected')) {
            jQuery(this).removeClass('SizeChickletSelected');
        } else {
            jQuery(this).addClass('SizeChickletSelected');
        }
    });
});

这是我的HTML（在SizeChicklets附加到UL之前）：

<ul class="linkList" id="binValue-6">      
    <li class="binValue">
        <input name="binId" value="size_name" type="hidden">
        <input name="binValue" value="0-3 Months" type="hidden">
        <a href=".com/s?field_size_name=0-3+Months&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchKeywords=*&amp;searchNodeID=5690131011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
            <input type="checkbox">0-3 Months
        </a>
    </li>
</ul>

这是我的CSS：

.SizeChicklets {
   /* JUST UL STYLES */
   clear: both;
}

.SizeChicklets:after {
   /* JUST UL STYLES */
   clear: both;
   display:block;
   width:100%;
}

.binName {
    clear:both;
}

.SizeChicklets li {
    /* JUST LI STYLES */
    float: left;
    color: #ffffff;
    margin-top: 5px;
}

.SizeChicklets li a input{
    display:none;
}

.SizeChicklets li a {
    /* JUST A STYLES */
    border: 1px solid #cacaca;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background: -moz-linear-gradient(top,  #666666 0%, #5f5f5f 20%, #3f3f3f 75%, #343434 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(20%,#5f5f5f), color-stop(75%,#3f3f3f), color-stop(100%,#343434)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
    min-width:33px;
    padding:2px 2px 2px 2px;
    width: auto;
    height: auto;
    font-size: 11px;
    color: white!important;
}

.SizeChicklets li a:visited {
    color: #FFFFFF;
}

.SizeChicklets li a:hover {
    /* JUST A STYLES */
    border: 1px solid #cacaca;
    font-size: 11px;
    color: #222222;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background: #de9b00; /* Old browsers */
    background: -moz-linear-gradient(top,  #de9b00 0%, #d99505 25%, #c47d0f 95%, #c37c0d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#de9b00), color-stop(25%,#d99505), color-stop(95%,#c47d0f), color-stop(100%,#c37c0d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de9b00', endColorstr='#c37c0d',GradientType=0 ); /* IE6-9 */
    width: auto;
    height: auto;
    font-size: 11px;
    color: white;
}

.SizeChickletSelected {
    /* JUST A STYLES */
    border: 1px solid #cacaca;
    font-size: 11px;
    color: #222222;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    background: #de9b00; /* Old browsers */
    background: -moz-linear-gradient(top,  #de9b00 0%, #d99505 25%, #c47d0f 95%, #c37c0d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#de9b00), color-stop(25%,#d99505), color-stop(95%,#c47d0f), color-stop(100%,#c37c0d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de9b00', endColorstr='#c37c0d',GradientType=0 ); /* IE6-9 */
    width: auto;
    height: auto;
    font-size: 11px;
    color: white;
}

谢谢。

Javascript没有在页面重新加载时执行

0 个答案: