ボタンをクリックしたときにdivを追加しましたが、追加されたdivが応答していません同じ

実行中ボタンをクリックしたときdivが作成されましたが、メインdivがサイズ変更のように機能していないのが& draggable 。助けてください？ボタンをクリックしたときにdivを追加しましたが、追加されたdivが応答していません同じ

<html> 
    <head> 
    <link rel="stylesheet" href="test.css"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <script> 
    $(function() { 
    $("#box").resizable({ 
    alsoResize:"#main", 
    alsoResize:"#title_bar", 
    alsoResize:"#container" 
    }); 
    $('#main').draggable(); 
      $("#button").click(function() { 
       if ($(this).html() == "-") { 
        $(this).html("+"); 
        } else { 
        $(this).html("-"); 
       } 
       $("#box").slideToggle(); 
      }); 
    $("#NewWidget").click(function() { 

      $("#container").append('<div class="main" id="main"><div id="title_bar" ><div id="button">-</div></div><div id="box"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>'); 

    }); 
    });</script> 
    </head> 
    <body> 
    <input type="button" id="NewWidget" value="Add New Widget"/> 
    <div id="container"> 
    <div class="main" id="main" > 
      <div id="title_bar" > 
      <div id="button">-</div> 
     </div> 
     <div id="box"> 
    <div>

出典

2017-06-29 Aviral Garg

の更新されたcodepenを参照してください。同じページに同じidを持つ2つの要素がある場合、jqueryは最初のものだけを選択します。その場合は、クラスセレクタを使用する必要があります。別の問題は、新しいdivを作成するときにイベントリスナーがないことです。あなたが作成した後すぐに新しいdivにイベントリスナーを設定する必要があります – bearwithbeard

私はdiv＆私はそのdivのクリックしたsreplicaを元のdivのものと同じ機能を実行するために作成されていると思います。それ？ –

IDのニーズは、ユニークすべき - の例では、私はどのようにお見せしたcodepenで単純なcounter変数を持つIDを作成します。これはこのスコープで利用可能です（クロージャについて覚えておいてください）。

あなたのコードで行ったことは、DOMへの新しい構造体です。この要素にはイベントハンドラ/フックが付いていません。そのため、要素をDOMに追加するときに新しいイベントハンドラ/フックを作成する必要があります、またはその後、私の例では、DOMに要素を追加する前にそれを行います。 https://codepen.io/anon/pen/GEyPXr

追加ヒント：可能な限り、無名関数を作成しないように、常にどちらかそれらに名前を付ける、またはそれらにreffer、意味：

$(".main").find('.button').on('click',function(){ 
    // this looks weak, plus anonymous function doesn't tell you what it does 
});

使用する代わりに、この：

はここcodepenへのリンクです

$(".main").find('.button').on('click',makeButtonWork); 

function makeButtonWork(){ 
    //this looks much better, plus you named the function and you know the purspose of it, without looking through code 
}

コメントに応答する：指定されたelemの開始位置の変更ENTは、追加することによって行うことができます。

$('#main-' + counter).css({'top': 100, 'left' : 20}) //your positions here をmakeButtonWork

にあなたが同じIDの多くを使用してより多くの情報

出典

2017-06-29 06:51:12 Tooschee

私はdivを持っていると私はボタンをクリックして同じ新しいdivを作成して元のdivのものと同じ機能を実行するようにしたいと思います。 –

私はあなたの質問を正しく理解していれば、答えは私がこの答えに付けられたcodepenです - 見てください:)。「新しいウィジェットを追加」をクリックするたびに、同じ「定義」（この場合はJavaScriptの関数）からビヘイビアを作成したため、同じ方法で動作する新しい要素（最後と同じ）を作成しています。 – Tooschee

Yaaは働いてくれてありがとうございますが、そのCSSをどうしたらいいのですか？divの背景色は、divごとに違うようにしなければならない場合、何ができるのですか？ –

JavaScriptイベントはこのようには機能しません。 $('#main').draggable();に電話をかけた瞬間にそれを取ると、ブラウザは一致する要素（ここではIDが 'main'のもの）を見つけて、何らかのアクションを実行します（ここではドラッグ可能な機能が有効になります）。後でもう一度要素を追加すると、これも一致していますが、何も意味しません。スクリプトをもう一度呼び出すまでは、単純なdivです。

また、IDはページ上で一意でなければならないことに注意してください。同じページに2つのid = "main" divを持つことはできません。代わりにクラスを使用してください。あなたがあるボックスを認識するIDの一意または使用するクラスまたはdata-id属性を要素の多くを作成し、どちらか作るので、もし

$("#NewWidget").click(function() { 
    var $newElement = $('<div class="main"><div class="title_bar" ><div class="button">-</div></div><div class="box"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>'); 
    $newElement.find('.main').draggable(); 
    $newElement.find('.button').click( /* add the click handler function here */); 
    $newElement.find('.box').resizable(/* resizable params goes here */); 
    $("#container").append($newElement); 
});

出典

2017-06-29 06:36:09

私はdivを持っていると仮定し、私はボタンをクリックして同じdivを作成します。これは元のdivのものと同じ機能を実行します。 –

ボタンをクリックしたときにdivを追加しましたが、追加されたdivが応答していません同じ

答えて

関連する問題