0

こんにちは、読んでくれてありがとう。HTMLonclick="__"参照の使用を避け、代わりにこれらのイベントを .js ファイルに入れようとしています。jQuery の .click() と .on() イベントについて読んだ後、ボタンのコードでこれを使用しようとしました。

edit<p>残りの内容のないa を急いで作成するため多くの回答は、p[name=p+または#p+参照に切り替えることを推奨していますが、私の主な問題は、ID/名前への参照の前にアラートを出すことさえできないことです。ご回答ありがとうございます。

HTML:

<p name="pBananas"> junk </p> 
<button class="deleter" id="dBananas" name="Bananas">Delete</button>

JS:

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        $("p" + $(this).attr("name")).remove();
    });
});

上記のコードは、ボタンをクリックしてもアラートに到達しません。また、名前と ID でボタンを参照し、$(document).ready($('.deleter')___.

$(handler)ドキュメントの準備ができた後にクリックイベントを設定するために、フォーマットも使用してみました。どちらの方法もうまくいかないようです。この時点で、.js ファイルonclick="deleteButton()"にdeleteButton()関数を追加しましたが、関数はすべてのタグ を検出$(this)せず、削除するだけです。<p>

私のjavascriptの残りの部分は機能しています。これを HTML の下部に含めようとはしていませんが.on()、HTML にもスクリプトを含めないようにしています。完全を期すために、HTML のレンダリングに .jsp ファイルを使用して、Chrome と Firefox の両方でテストを行ってきました。

再度、感謝します。

編集

jquery と js を直接コピーして貼り付けて参照する方法を次に示します。

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
</head>

これが、私のhtmlがdivに至るまでの様子です。

挿入されます:

<body>
    <div id="wrapper">
        <div id="header">Card Draw Probability Calculator</div>
        <div id="main">
            <div id="cardList">
                <fieldset>
                    <legend> Select cards for probability calculation</legend>

                        <div id="innerCardList"></div>

<p>の生成方法は次のとおりです。

function newestCardListLineMaker() {
    var $newLine = $('<p id="newestPara"><input type="checkbox" name="new" value="none"/> <input class="cardText" type="text" maxlength="30" name="newestCard" /> Quantity <input type="text" maxlength="1" class="quantityText" name="newestQuant" /><button class="deleter" id="newestDelete">Delete</button><br/></p>');

    $("#innerCardList").append($newLine);

別の注意として、以前に重要であると見なすべきでした:.clickまたは.on(click, handler)が参照している HTML は、別の js 関数によって作成されています。

4

6 に答える 6

1

私はあなたのjavascriptコードを変更しました。

$('.deleter').click(function() {
        alert('click function works');
        var p="p"+$(this).attr("name");
        $('p[name='+p+']').remove();
});
于 2012-09-04T06:32:37.447 に答える
1

.on() 関数を使用してみてください。コードは次のようになります。

$(document).ready({
  $('.deleter').on('click', function(){
     //do stuff here
  });
});

さらに良いのはこれです：

$(document).ready({
   $('div_above_.deleter').on('click', '.deleter', function(){
     // do stuff here
   });
});

これがお役に立てば幸いです。

于 2012-09-04T06:30:35.310 に答える
1

動作デモ 

<p id="pBananas"> junk </p> 
    <button class="deleter" id="dBananas" name="Bananas">Delete</button>​

    $(document).ready(function() {
        $('.deleter').click(function() {
            alert('click function works');
            $("#p" + $(this).attr("name")).hide();
        });
    });​

編集されたJsfiddle

于 2012-09-04T06:02:34.913 に答える
0

私にとってはうまくいきます。ただし、Paragraph 要素は削除しなかったため、コードは次のようになります。

<p id="pBananas"> junk </p> 
<button class="deleter" id="dBananas" name="Bananas">Delete</button>

と

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        $("#p" + $(this).attr("name")).remove();
    });
});
于 2012-09-04T05:59:02.070 に答える
0 
$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        //alert($(this).attr("name"));
        $("p[name=p" + $(this).attr("name") + "]").remove();
    });
});​
于 2012-09-04T06:08:11.203 に答える
0

.on('click')イベントを完了するために使用した最終的なコードは次のとおりです。

$(document).ready(function() {
    $("div#innerCardList").on("click", "button.deleter", function() {
        var paraName = $(this).closest("p").attr("id");
        $("#" + paraName).remove();
    });

});

クリック イベントを割り当てたい HTML 要素は、ページが既に読み込まれた後に生成されました。イベントを含む div に委任する必要がありました。

すべての助けとさまざまな視点をありがとう！

于 2012-09-05T20:33:11.937 に答える