0

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>
Improve this question
9
  • 2
    Hi! Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button; here's how to do one). Commented Jul 17, 2018 at 16:38
  • 3
    It's not likely to be the cause of your issue but your HTML code is malformed. No closing tag for article. Commented Jul 17, 2018 at 16:41
  • There's already a closing tag but stackoverflow removes it for some reason Commented Jul 17, 2018 at 16:43
  • 1
    Have you checked the console? Commented Jul 17, 2018 at 16:43
  • This is the first thing I've done Commented Jul 17, 2018 at 16:43

3 Answers 3

Reset to default
3

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Still the same thing
@Hema_Elmasry You will need to provide more insights on how to reproduce the issue as this solution seems to fix the bug.
@Hema_Elmasry What Still is the same thing? What exactly isn't working for you?
When I click on the icon, Nothing happens No errors, nothing
I'm sorry, but I cannot reproduce what you are experiencing. I've tried multiple browsers and all of them are clickable. Others, have also confirmed that it is working for them. It might be specific to your setup you have.
1

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>

Improve this answer

7 Comments

That's certainly true, but wouldn't account for the OP's symptom. Best to wait to answer until/unless the OP provides a more complete example.
I've added a snippet.
If the only change is optionValue instead of $(optionValue), this isn't the problem (though, again, it's a problem :-) ). With $(optionValue) it would work just as it does in your snippet, but with the text [object Object] as the value.
maybe he wanted to use template literals ` string ${variable/expression} string`
@Hema_Elmasry And this code isn't working? What is the problem?
|
0

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();
});
});
Improve this answer

3 Comments

You don't need to wrap the append() function argument with the function $, just write $("select").append(appendedOption);.
You can mark your answer as the correct one. It removes the question from the unanswered questions as well as helps future readers.
I just have to wait 2 days to mark it as the correct one

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.