jQuery动态添加和删除元素

Question

I am trying to add and remove a span element dynamically. it's throwing syntax errors like

expected ')' and expected ';'

please help me to fix it.

<script type="text/javascript">
    $(document).ready(function () {
        $("input[data-required='true']").focus(function () {
            $(this).css({ 'background-color': 'red' }).after("<span class="label_error;"style="color:red;font-size:10pt">This field is required</span>");
        });

    $("input[data-required='true']").blur(function () {
        $(this).css({ 'background-color': 'white' }).remove("<span class="label_error;"style="color:red;font-size:10pt">This field is required</span>") ;
    });

    });
</script>

Answer 1

The way that you are concatenating the values in your HTML string is wrong,

.after("<span class='label_error' style='color:red;font-size:10pt;'>" +
         "This field is required" +
        "</span>");

To fix this issue either you can use single quote in your string wrapped by double quotes or try to escape the double quote by using \\ like "avi\\"s code is wrong" .

On top of all, the best approach would be creating element by using jquery,

.after($("<span>", {class : 'label_error', 
                    style : 'color:red;font-size:10pt;',
                    text : 'This field is required'
                   }));

This would be more readable and maintainable. And I forgot to spot another one error that you made in your code. You are using .remove() in a wrong way,

$("input[data-required='true']").blur(function () {
   $(this).css({ 'background-color': 'white' }).next("span.label_error").remove();
});

You have to select the relevant element from your $(this) object and invoke remove over it.

---

And the best approach for finishing up your task is, allot the styling works to be done to the css by writing rules with relevant selectors (said by @rory)

input[data-required='true'] {
  background-color: white;
}
input[data-required='true']:focus {
  background-color: red;
}
span.label_error {
  color: red;
  font-size: 10pt;
}

And the js would be,

var errorMsg = $("<span>", {class: 'label_error',text: 'This field is required'});

$("input[data-required='true']").focus(function() {
  $(this).after(errorMsg);
}).blur(function() {
  $(this).next("span.label_error").remove();
});

DEMO

Answer 2

You have two issues. Firstly you need to use different quotes to delimit the string to those you use within the string. Helpfully, in JS you can use either single ( ' ) or double ( " ) quotes to achieve the same purpose. Also, the class attribute should not have a trailing ; . It can be helpful to use a text editor which has syntax highlighting as it makes it nearly impossible to miss mistakes like that.

Your second problem is that the remove() method expects a selector, not a whole HTML string. To remove the span which was appended in the focus event, use next() to select it, then remove() . Try this:

$("input[data-required='true']").focus(function () {
    $(this).css({ 'background-color': 'red' }).after('<span class="label_error" style="color: red; font-size: 10pt">This field is required</span>');
});

$("input[data-required='true']").blur(function () {
    $(this).css({ 'background-color': 'white' }).next('span').remove();
});

Finally, note that it is much better practice to define your styles in CSS as it separates the HTML/JS from the styling rules, and helps make the JS shorter as well. Try this:

input[data-required='true'] {
    background-color: white; /* transparent may work here too */
}
input[data-required='true']:focus {
    background-color: red;
}
span.label_error {
    color: red;
    font-size: 10pt;
}

$("input[data-required='true']").focus(function () {
    $(this).after('<span class="label_error">This field is required</span>');
}).blur(function () {
    $(this).next('span').remove();
});

Working example