添加一個div點擊一個按鈕，但添加的div不響應

我正在執行該按鈕單擊一個div創建，但問題是它不像主體div一樣執行像調整大小&可拖動。請幫忙？添加一個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

。如果你在同一個頁面上有兩個相同id的元素，jquery只選擇第一個元素。在這種情況下，你應該使用類選擇器。另一個可能的問題是當你創建新的div時，它沒有任何事件監聽器。你必須設置事件監聽器到你的新div創建後 – bearwithbeard

假設我有一個div，我希望在按鈕上單擊該div的sreplica創建它執行與原始div相同的功能。我能做什麼那？ –

該ID的需求是唯一的，所以如果你創造了很多的元素，要麼使ID的獨特或使用類或data-id屬性識別哪個盒子是 - 在本例中codepen我展示瞭如何使用簡單的counter變量創建ID，該變量在此範圍內可用（記住關閉）。

你在你的代碼中做了什麼只是appending一個新的DOM結構，沒有附加到這個元素的事件處理程序/鉤子，這就是爲什麼當你添加元素到DOM時需要創建新的事件處理程序/鉤子或之後，在我的例子中，我會將它添加到DOM之前。

這裏的鏈接codepen： 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 
});

用這個代替：

$(".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 
}

回覆評論：改變給定元素的開始位置耳鼻喉科可以通過添加來完成：

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

查看更新後的codepen更多信息你用了很多相同的id

來源

2017-06-29 06:51:12 Tooschee

假設我有一個div，我希望在點擊按鈕時創建相同的新div，它執行與原div相同的功能。我能做些什麼？ –

如果我正確地理解了你的問題，那麼答案就是我附加到這個答案的codepen - 看看:)。每次你點擊「Add new Widget」時，你都會創建一個新的元素（與最後一個相同），因爲你創建的行爲來自同一個「定義」（在這種情況下是Javascript中的函數） – Tooschee

Yaa感謝它的工作，但是如何處理它的CSS？divs的背景顏色nd如果我必須在每個div上以不同的方式工作，那我該怎麼做？ –

JavaScript事件不這樣工作。當你撥打$('#main').draggable();時，那麼瀏覽器找到匹配的元素（這裏是一個ID爲'main'的元素），並對它進行一些操作（這裏啓用可拖動功能）。如果您稍後添加另一個元素，它也會一直匹配，但它不代表什麼 - 它只是一個普通的div，直到您再次調用某個腳本。

另外，請記住，ID必須在您的網頁上唯一，您不能在同一頁上擁有兩個ID =「主」div。改用類。

$("#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不響應

回答

相關問題