无法从动态创建的按钮中获取文本

时间:2014-05-26 14:50:28

标签: javascript jquery html

请查看此fiddle example

我正在使用$('parentselector').on('click','selector', function(){将click事件绑定到动态创建的链接,以便当有人点击它时,它会在表格中显示其值。但html()函数仍然返回旧链接的值。谁能指出这个例子的问题是什么?

jQuery的:

$(function(){
  $('.area').each(function(){
   var area = $(this),
       selectbox = area.find('select'),
       show = area.find('.show'),   
       dialog_open =  $(this).find(".dialog_open")


   selectbox.change(function(){
    selectbox = $(this).find('option:selected').text();
    show.html('<a href="#" onclick="javascript: return false" class="dialog_open">'+selectbox+'</a>')
    });
   show.on('click',dialog_open, function(){
      var dialog_open_text = dialog_open.text();
      $('td').html(dialog_open_text);
   });
  });
});

HTML:

<div class="area">
    <select>
        <option>Choose</option>
        <option>One</option>
        <option>Two</option>
    </select>
    <div class="show">
        <a class="dialog_open" onclick="javascript: return false" href="#">Three</a>
    </div>
</div>

<div class="area">
    <select>
        <option>Choose</option>
        <option>One</option>
        <option>Two</option>
    </select>
    <div class="show">
        <a class="dialog_open" onclick="javascript: return false" href="#">Four</a>
    </div>
</div>

<table>
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

3 个答案:

答案 0 :(得分:1)

<强> Example

将.on(&#39;点击&#39;)换成.click(),然后从选择框中选择值。 :)

$(function(){
  $('.area').each(function(){
   var area = $(this),
       selectbox = area.find('select'),
       show = area.find('.show'),   
       dialog_open =  $(this).find(".dialog_open")


   selectbox.change(function(){
    var selectbox = $(this),
        value = selectbox.val();
        show.html('<a href="#" onclick="javascript: return false" class="dialog_open">' + value + '</a>');
    });
   show.click(function(){
      var dialog_open_text = $(this).siblings('select').val();
      $('td').html(dialog_open_text);
   });
  });
});

P.S。您可能还应检查$(document).ready(),具体取决于您正在做什么。

答案 1 :(得分:1)

这是因为您只是在加载页面时定义“dialog_open”的值,并且通过编写dialog_open.text()它只是获取“旧”值。将其更改为:

show.on('click',dialog_open, function(){
    var dialog_open_text = $(this).find(".dialog_open").text();
    $('td').html(dialog_open_text);
});

http://jsfiddle.net/Niffler/XCfAQ/

答案 2 :(得分:1)

我们这样做:

$('parentselector').on('click','selector', function(){

理解当完成此绑定时,'parentselector'位于DOM中。否则我们使用:

$(document).on('click','selector', function(){

确保在DOM准备就绪中完成此操作。