2

このようなもの: 「追加」をクリックするとコンテンツが変更され、「かなり」をクリックするとコンテンツが戻ってきます。コードはこちらです。リンク:

[コード][1] 「追加」をクリックした後、「かなり」をもう一度クリックするにはどうすればよいですか?

<!DOCTYPE HTML>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
    #department a {
        text-decoration: none;
    }
    #department span {
        display: inline-block;
        color: red;
        margin-right: 20px;
    }
    #department p {
        display: inline;
    }
    #department p span {
        color: green;
        font-weight: bold;
    }
    #department input {
        width: 100px;
        margin-right: 20px;
    }
</style>
<script src="../jquery-1.10.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
            $("#department >p a").click(function() {
                $("#department p").empty()
                $("#department p").append('<input type="text" name="department"><a href="javascript:void(0)">quite</a>')
            })
    }) 
  </script>
 </head>
 <body>
 <div id="department">
    <span>department</span>
    <p>
        <span>office</span>
        <span>seek</span>
        <a href="javascirpt:void(0);">add</a>
    </p>
 </div>
</body>
</html>

コードをここに置きます：http://jsfiddle.net/Jackyhua/zTkXL/

4

3 に答える 3

0

これらの行の何か。

$(document).ready(function () {
   // These variables hold the HTML that has to be shown when the 
   // structure changes
    var $quite = '<input type="text" name="department">' 
                + '<a class="quite" href="javascript:void(0)">quite</a>';
    var $add = '<span>office</span> <span>seek</span>' 
             + '<a class="add" href="javascirpt:void(0);">add</a>';
    // Use event Delegation 
    // You are dynamically adding and removing elements.
    // So normal binding of event will not work
    $('#department').on('click', '.quite, .add', function(e) {
        var $department = $("#department p");
        $department.empty();
    // Added specific classes to anchors to target them
    $(e.target).hasClass('quite') ? $department.append($add) : $department.append($quite);
    });
})

フィドルをチェック

于 2013-07-29T03:45:52.287 に答える
0

要素を作成するときは、動的イベント ハンドラーを使用する必要があります ( だけでなく.click()): ドキュメントの.on():こちらを参照してください。良い例もたくさんあります。あなたの場合、クラス名を追加してイベントハンドラーをトリガーできます。次のようになります。

HTML:

<div id="department">
    <span>department</span>
    <p>
        <span>office</span>
        <span>seek</span>
        <a class="add">add</a>
    </p>
 </div>

JQuery:

$("#department .add").on('click', function (e) {
    //this replaces the need for javascript:void
    e.preventDefault();
    //you can chain functions, since you're operating on the same element
    $(this).parent('p')
        .empty()
        .append('<input type="text" name="department"><a class="quite">quite</a>')
});

$("#department .quite").on('click', function (e) {
    //this replaces the need for javascript:void
    e.preventDefault();
    //do something else
});
于 2013-07-29T03:46:07.833 に答える