AJAX調用不適用於jQuery切換

Question

為了使我的jQuery切換更易於管理； 我正在嘗試通過AJAX調用成功提取其內容，但是我的AJAX調用會殺死我的切換按鈕-關於​​我在這里做錯什么的任何指針？

<script>    
    $(document).ready(function() {    
        $('#toggle3').click(function(){
            var $tog = $('.toggle');
            $tog.hide(1000);
            $.ajax({
                url: 'path/to/my/script.php',
                type: 'GET', //this is default anyway, only for verbosity
                success: function (fields){
                    $tog.html(fields);
                    $tog.slideToggle(1000);
                }
            });
        });
    });    
</script>

Script.php本質上是一種形式，嵌套在div中； 如下所示：

<div style="font-size: 12px; color: #000; text-align: left; padding-left: 15px; padding-top: 20px;">
    <form>
        <br>Back wheel color?
        <br>
        <input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4">Purple</span>
        <br>
        <input type="radio" name="backwheel" value="White">White</br>
        <input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span>
        </br>
        <input type="radio" name="backwheel" value="Blue">Blue</br>
        <input type="radio" name="backwheel" value="Tan">Tan</br>
        <input type="radio" name="backwheel" value="Grey">Grey</br>
        <input type="radio" name="backwheel" value="Pink">Pink</br>
        <input type="radio" name="backwheel" value="Red">Red</br>
        <input type="radio" name="backwheel" value="Yellow">Yellow</br>
        <input type="radio" name="backwheel" value="Black">Black</br>
        <input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span>
        </br>
    </form>
    </span>
    </form>
    <br>Front Wheel (if different)
    <br>
    <form>
        <br>Front wheel color?
        <br>
        <input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4">Purple</span>
        <br>
        <input type="radio" name="backwheel" value="White">White</br>
        <input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span>
        </br>
        <input type="radio" name="backwheel" value="Blue">Blue</br>
        <input type="radio" name="backwheel" value="Tan">Tan</br>
        <input type="radio" name="backwheel" value="Grey">Grey</br>
        <input type="radio" name="backwheel" value="Pink">Pink</br>
        <input type="radio" name="backwheel" value="Red">Red</br>
        <input type="radio" name="backwheel" value="Yellow">Yellow</br>
        <input type="radio" name="backwheel" value="Black">Black</br>
        <input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span>
        </br>
    </form>
</div>
<div id="next"><a href="#" id="toggle3">Check Out!<img src="http://northbrooklyncollective.com/wp-content/uploads/2013/11/519629-129_ArrowRight-128.png" class="tool"></a>
</div>

原來起作用的代碼（如下）：

$(function() {
    $('#toggle3').click(function () {
        $('.toggle').hide('1000');
        $('.toggle').html('<div style="font-size: 12px; color: #000; text-align: left; padding-left: 15px; padding-top: 20px;"><form><br>Back wheel color?<br><input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4"><img src="http://ecx.images-amazon.com/images/I/41S7CRzpV3L._AA160_.jpg" style="max-height: 100px;">Purple</span><br><input type="radio" name="backwheel" value="White">White</br><input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span></br><input type="radio" name="backwheel" value="Blue">Blue</br><input type="radio" name="backwheel" value="Tan">Tan</br><input type="radio" name="backwheel" value="Grey">Grey</br><input type="radio" name="backwheel" value="Pink">Pink</br><input type="radio" name="backwheel" value="Red">Red</br><input type="radio" name="backwheel" value="Yellow">Yellow</br><input type="radio" name="backwheel" value="Black">Black</br><input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span></br></form></span></form><br>Front Wheel (if different)<br><form><br>Front wheel color?<br><input type="radio" name="backwheel" value="Purple"><span style="color: #B500E4">Purple</span><br><input type="radio" name="backwheel" value="White">White</br><input type="radio" name="backwheel" value="Light Blue"><span style="color: #74A1C4;">Light Blue</span></br><input type="radio" name="backwheel" value="Blue">Blue</br><input type="radio" name="backwheel" value="Tan">Tan</br><input type="radio" name="backwheel" value="Grey">Grey</br><input type="radio" name="backwheel" value="Pink">Pink</br><input type="radio" name="backwheel" value="Red">Red</br><input type="radio" name="backwheel" value="Yellow">Yellow</br><input type="radio" name="backwheel" value="Black">Black</br><input type="radio" name="backwheel" value="Green"><span style="color:#44CA2C">Green</span></br></form></div><div id="next"><a href="#" id="toggle3">Check Out!<img src="http://northbrooklyncollective.com/wp-content/uploads/2013/11/519629-129_ArrowRight-128.png" class="tool"></a></div>');
        $('.toggle').slideToggle('1000');

        return false; 
    });
});

Answer 1

在這種情況下，問題在於變量名（$ tog）以美元符號開頭。 盡管從技術上講這是一個有效的Javascript變量名，但它與以$開頭的jQuery庫沖突。

雖然PHP將$用作變量名，但這在Javascript中不是標准的。

您可以按以下方式更新代碼來解決：

<script>

$(document).ready(function() {

$('#toggle3').click(function(){
    var tog = $('.toggle');
    tog.hide(1000);
    $.ajax({
        url: 'path/to/my/script.php',
        type: 'GET', //this is default anyway, only for verbosity
        success: function (fields){
            tog.html(fields);
            tog.slideToggle(1000);
        }
    });
  });
});

</script>