jquery - jQueryクリックで何もしませんか?

Question

次のコードは、 をクリックすると<span class="edit_submit"></span>、 の内容を取得し、textareaPOST 経由で に送信し、edited_page.phpの内容を表示することになっていedited_page.phpます。現時点では、機能が実行されているとは思えません。何か案は？

フィドルはここにあります。

$('.edit_submit').on('click', function () {
                $parent = $(this).parent()
                $textarea = $(this).siblings(".el-rte").child(".workzone").child("textarea");
                $text = $textarea.val();
                $id = $textarea.attr('id');
                $parent.html("images/load.jpg").load("edited_page.php", {location: $id, content: $text, page: "<?php echo $page; ?>"});
            });

HTML:

<div id="main">
    <div class="el-rte">
        <div class="workzone" style="height: 400px;">
            <textarea id="main" class="edit_area" style="display: none; height: 400px;" name="main">
                &lt;b&gt;Hello. &lt;/b&gt;&lt;i&gt;This is sam &lt;/i&gt;&lt;u&gt;Testing this website&nbsp;&lt;/u&gt;
            </textarea>
        </div>
    </div>
    <span class="edit_submit" style="background:black;">Save Edit</span></div>
</div>

Answer 1

これが作業中のフィドルchild()です...私が使用したjqueryにはメソッドがありませんchildren()...そしてあなたのフィドルにあった問題を修正しました

$('.edit_submit').on('click', function () {
           $parent = $(this).parent()
           $textarea = $(this).siblings(".el-rte").children(".workzone").children("textarea");
           $text = $textarea.val();
           $id = $textarea.attr('id');
           alert($id);
           $parent.html("images/load.jpg").load("edited_page.php", {location: $id, content: $text, page: "<?php echo $page; ?>"});
        });

そして子供や兄弟を通り抜ける代わりに..あなたはただ使うことができますfind()

$textarea = $parent.find('textarea');

更新しました

フィドル

Answer 2

以下の変更を行う必要があります。

<div id="main"> 
<textarea id="main"> 

DOMの ID は一意でなければなりません

複数の DOM に同じ ID を持っています。それが問題だと思います。

また

$textarea = $(this).prev(".el-rte").find(".workzone textarea");
console.log($textarea);

Answer 3

$textarea = $(this).siblings(".el-rte").child(".workzone").child("textarea"); 

への変更

$textarea = $(this).siblings(".el-rte").children(".workzone").children("textarea");

にコーディングしますdocument ready

$(document).ready(function(){
    $('.edit_submit').on('click', function () {
        $parent = $(this).parent()
        $textarea = $(this).siblings(".el-rte").children(".workzone").children("textarea");
        $text = $textarea.val();
        $id = $textarea.attr('id');
        $parent.html("images/load.jpg").load("edited_page.php", {location: $id, content: $text, page: "<?php echo $page; ?>"});
    });
})

こちらのデモ

Answer 4

これを試して..

$('.edit_submit').click( function () {
                $parent = $(this).parent()
                $textarea = $(this).siblings(".el-rte").child(".workzone").child("textarea");
                $text = $textarea.val();
                $id = $textarea.attr('id');
                $parent.html("images/load.jpg").load("edited_page.php", {location: $id, content: $text, page: "<?php echo $page; ?>"});
            });