javascript - 如何从html调用嵌套的jquery函数？

Question

我正在从嵌套在 add() 函数内的 html onclick() 调用 addtext() 函数。我想调用第二个函数。我该如何解决这个问题？

这里我有一个带有add()函数的链接，它显示了一个文本框和一个带有addtext()的ADD按钮。add() 函数检查文本，如果文本存在，它会生成一个新的文本框。现在我希望添加按钮从文本框中获取该文本并将其设置为替换文本框。单击ADD按钮会将其带到add()函数内的addtext()。

HTML 代码:

     <a id = "newcard" href="#" onclick="add()" >
            <b style ="color: #444444">Add Card...</b>
     </a>

     <div>
          <span id = "show-ta"><textarea id="txtarea" style =" 
      display:none"></textarea><span>
          <span id = "newbutton"><button id = "firstbutton" class ="btn btn-
      success nbutton"onclick="addtext()" style ="display:none">Add</button>
          </span>
     </div>

Jquery 代码:

     function add(){
      var newTextBoxDiv = $(document.createElement('textarea'));
      if ( $('#txtarea').css('display') == 'none' ){
    $('#txtarea').css('display', 'block');
       }
      if ( $('#firstbutton').css('display') == 'none' ){
    $('#firstbutton').css('display', 'block');
       }
      var wrapper = $('#show-ta');
      var button = $(document.createElement('button'));

    if(wrapper.find('textarea').last().val().length) {
       var x =wrapper.find('textarea').last().val();
        function addtext()
        {

        }
        wrapper.append('<textarea class="t-one"></textarea>');
        wrapper.append('<button class ="btn btn-success 
   nbutton">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;
        //button.addClass("btn btn-success");
        wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
        wrapper.addClass('t-one');
       // var text =$('textarea:nth-last-child(2)').val().length;

        //wrapper.addClass('nbutton');
    }

Answer 1

您必须将嵌套函数分配给像这样的 addText.add = add; 属性，然后您可以在 onClick 事件中调用该函数。

function addText()
    {
        // irrelevant code here
        function add(arg){
            console.log( arg );
        }
    
        addText.add = add;
    }
    addText();

<button onclick="addText.add('Nested function')">Click me</button>

编辑:

根据您的代码更新了代码片段

function add() {
  var newTextBoxDiv = $(document.createElement('textarea'));
  if ($('#txtarea').css('display') == 'none') {
    $('#txtarea').css('display', 'block');
  }
  if ($('#firstbutton').css('display') == 'none') {
    $('#firstbutton').css('display', 'block');
  }
  var wrapper = $('#show-ta');
  var button = $(document.createElement('button'));

  if (wrapper.find('textarea').last().val().length) {
    var x = wrapper.find('textarea').last().val();

    function addtext() {
      alert('working');
    }
    add.addtext = addtext;
    wrapper.append('<textarea class="t-one"></textarea>');
    wrapper.append('<button class="btn btn-success nbutton ">Add</button>').appendTo('#cardarea').insertAfter('#cardtitle');;

    wrapper.appendTo("#cardarea").insertAfter('#cardtitle');
    wrapper.addClass('t-one');

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a id="newcard" href="#" onclick="add()">
  <b style="color: #444444">Add Card...</b>
</a>
<div>
  <span id="show-ta">
  <textarea id="txtarea" style ="display:none">
  </textarea>
  </span>
  <span id="newbutton">
  <button id = "firstbutton" class ="btn btn-success nbutton" onclick="add.addtext()" style="display:none">Add
  </button>
</span>
</div>