Question

点击添加button后，我会将列表和button：新按钮附加到页面。但我想要的是当＆＃34; New按钮＆＃34;单击，应该将一个变量打印到父级（＆＃34;新按钮＆＃34;所在的列表）。

我怎样才能实现这个目标？

代码：

.boardcanvas
    {
    position: relative;
    -webkit-box-flex: 1;
    flex-grow: 1;
    background-color: cadetblue;
    }
#board
    {
    white-space: nowrap;
    margin-bottom: 10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-right: 56px;  
    background-color: rgb(95, 130, 131);
    position: absolute;
    display: inline-flex;

    }
.listwrapper{
    height: 100%;
    width: 270px;
    vertical-align: top;
    white-space: nowrap;
    background-color: rgb(10, 73, 75);
    display: inline-block;
    margin-left:0;
}
.controls{
padding:0;
margin:0;
}

HTML：

   <body class = "boardcanvas">
        <div id="board">
            <div class = "controls">
                <button onclick="addme()">
                    Add
                </button>
            </div>

    <div class ="listwrapper" id = "listwrapper" style="display:none">
        <ul id ="selected"   style ="margin:0; padding:0; list-style: none;" 
            class ="consort">
            <div id ="transparent">
                    <button onclick ="new1()">New button</button>
            </div>
        </ul>
    </div>

  </div>
     <a id = "addlist" onclick ="change()" style ="color:inherit" href="#">
                Add a List...
        </a>
 </body>

JQuery的：

  <script type ="text/javascript">
    $('.controls').hide();
     function change()
        {   $('#addlist').replaceWith('<div class = "controls"><button 
            onclick="addme()">Add'+
                '</button></div>');

        }   

 function addme()
  {   
  $('#board').append('<div class ="listwrapper" id = "listwrapper">'+
            '<ul id ="selected"   style ="margin:0; padding:0; list-style: 
   none;" class ="consort">'+
                '<div id ="transparent">'+
                '<button onclick ="new1()">New button</button>'+ 
                '</div>'+
            '</ul></div>');
  $('.controls').appendTo('#board');

   }

function new1(){
    $("#listwrapper").append("a");
}

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="reverse">
  <li>aa</li>
  <li>ab</li>
  <li>ac</li>
</ol>

<ol class="reverse">
  <li>a</li>
  <li>bb</li>
  <li>cccc</li>
  <li>ddddd</li>
</ol>


<ol>
  <li>a</li>
  <li>bb</li>
  <li>cccc</li>
  <li>ddddd</li>
</ol>

＆＃13;

选中此项我已更新您正在使用的代码。

Answer 2

而是绑定将单击事件发送到元素本身，以便您可以使用它来使用jQuery方法引用它的父级.parents() ^{Ref - jQuery API}，例如：.parents('.listwrapper')。

一旦你引用了正确的元素，你就可以链接.append()方法来附加你需要的东西，.eg：

$('#board').on('click', '.add-new-button', function(){
  $(this).parents('.listwrapper').append("a");
});

注意：
由于元素是动态生成的，并且可能不存在于页面加载中以直接将事件绑定到委托 ^{Ref - jQuery API}事件处理程序到最近的包含元素在页面加载时出现，例如：#board，然后将事件目标或触发元素引用为选择器参数，例如：.add-new-button。

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on()时存在。 To   确保元素存在并可以选择，放置脚本   在HTML标记中的元素之后或在里面执行事件绑定   文档就绪处理程序。或者，使用委托事件   附上事件处理程序。

委派活动的优势在于他们可以处理来自的活动   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   委托事件处理程序附加，您可以使用委托事件   避免频繁附加和删除事件处理程序。

参考：Direct and delegated events - .on() | jQuery API Documentation

代码段示范：

＆＃13;

$('.controls').hide();

function change() {
  $('#addlist').replaceWith('<div class="controls"><button onclick="addme()">Add</button></div>');
}

function addme() {
  $('#board').append('<div class="listwrapper" id="listwrapper">' +
    '<ul id="selected" style="margin:0; padding:0; list-style:none;" class="consort ">' +
    '<div id="transparent">' +
    '<button class="add-new-button">New button</button>' +
    '</div>' +
    '</ul>' +
    '</div>');
  $('.controls').appendTo('#board');
}

$('#board').on('click', '.add-new-button', function(){
  $(this).parents('.listwrapper').append("a");
});

＆＃13;

.boardcanvas {
  position: relative;
  -webkit-box-flex: 1;
  flex-grow: 1;
  background-color: cadetblue;
}

#board {
  white-space: nowrap;
  margin-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 56px;
  background-color: rgb(95, 130, 131);
  position: absolute;
  display: inline-flex;
}

.listwrapper {
  height: 100%;
  width: 270px;
  vertical-align: top;
  white-space: nowrap;
  background-color: rgb(10, 73, 75);
  display: inline-block;
  margin-left: 0;
}

.controls {
  padding: 0;
  margin: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="boardcanvas">
  <div id="board">
    <div class="controls">
      <button onclick="addme()">Add</button>
    </div>

    <div class="listwrapper" id="listwrapper" style="display:none">
      <ul id="selected" style="margin:0; padding:0; list-style: none;" class="consort">
        <div id="transparent">
          <button class="add-new-button">New button</button>
        </div>
      </ul>
    </div>

  </div>
  <a id="addlist" onclick="change()" style="color:inherit" href="#">Add a List...</a>
</body>

＆＃13;

Updated JSFiddle

如何获取组件的父级？

2 个答案: