jQuery-该代码有什么问题？

Question

I've onclick jquery code that doesn't give any response even with an error!

I don't know why, but here's my jQuery Code :

/* This Is working correctly */
$(".add-blog .blog-add-form .add-article .input-group select").on("change", function() {
  var tagsUl = '<li class="' + $(this).val() + '"><i class="fa fa-fw fa-times" aria-hidden="true"></i> ' + $(".add-blog .blog-add-form .add-article .input-group select option:selected").text() + '</li>';
  $(".add-blog .blog-add-form .add-article .input-group ul").append($(tagsUl));
  $(".add-blog .blog-add-form .add-article .input-group select option:selected").remove();
});

/* This isn't working correctly */
$(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() {
  var optionValue = $(this).parent().attr("class"),
    optionText = $(this).parent().text(),
    appendedOption = "<option value='" + $(optionValue) + "'>" + $(optionText) + "</option>";
  $(this).parent().parent().parent().children("select").append($(appendedOption));
  $(this).parent().remove();
});

I'm 100% sure that this element selector exist
when I open the css element inspector, select the element and put the same element selector, it shows that this element is the selected one.

anyway, here's my HTML Code :

<article class='add-blog'>
  <div class='blog-add-form'>
    <div class='add-article'>
      <form method='POST' action='example.php' class='form-horizontal'>
        <div class='input-group'>
          <select></select>
          <ul class='list-unstyled selected-ul'>
            <li class='0'><i class='fa fa-fw fa-times'></i> Anytext</li>
          </ul>
        </div>
      </form>
    </div>
  </div>
</article>

Answer 1

Your problem is that you are casting your optionValue and optionText to another jQuery object when you add them to appendOption . Remove the $() around optionValue and optionText and it should work.

 $(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() { var optionValue = $(this).parent().attr("class"); var optionText = $(this).parent().text(); var appendedOption = "<option value='" + optionValue + "'>" + optionText + "</option>"; $(this).parent().parent().parent().children("select").append($(appendedOption)); $(this).parent().remove(); }); 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article class='add-blog'> <div class='blog-add-form'> <div class='add-article'> <form method='POST' action='example.php' class='form-horizontal'> <div class='input-group'> <select></select> <ul class='list-unstyled selected-ul'> <li class='0'><i class='fa fa-fw fa-times'></i> Anytext</li> </ul> </div> </form> </div> </div> </article> 

Answer 2

You're trying to pass to the jQuery function ( $ ) a string, and it interept it as a selector:

appendedOption  = "<option value='" + $(optionValue) + "'>" + $(optionText) + "</option>";

Instead, do it as follows:

appendedOption  = "<option value='" + optionValue + "'>" + optionText + "</option>";

 $(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() { var optionValue = $(this).parent().attr("class"), optionText = $(this).parent().text(), appendedOption = "<option value='" + optionValue + "'>" + optionText + "</option>"; $(this).parent().parent().parent().children("select").append(appendedOption); $(this).parent().remove(); }); 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article class='add-blog'> <div class='blog-add-form'> <div class='add-article'> <form method='POST' action='example.php' class='form-horizontal'> <div class='input-group'> <select></select> <ul class='list-unstyled selected-ul'> <li class='0'><i class='fa fa-fw fa-times'></i> Anytext</li> </ul> </div> </form> </div> </div> </article> 

Answer 3

Solved

Thanks to everyone who helped me in solving this problem !
When you guys have told me that the code is working fine with you,
I knew that the problem isn't from the onclick jQuery function.
My new code :

 $(".add-blog .blog-add-form .add-article .input-group select").on("change", function() { var tagsUl = '<li class="' + $(this).val() + '"><i class="fa fa-fw fa-times" aria-hidden="true"></i> ' + $(".add-blog .blog-add-form .add-article .input-group select option:selected").text() + '</li>'; $(".add-blog .blog-add-form .add-article .input-group ul").append($(tagsUl)); $(".add-blog .blog-add-form .add-article .input-group select option:selected").remove(); $(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() { var optionValue = $(this).parent().attr("class"), optionText = $(this).parent().text(), appendedOption = "<option value='" + optionValue + "'>" + optionText + "</option>"; $("select").append(appendedOption); $(this).parent().remove(); }); });