Bootstrap进度条未显示

Question

如果答案很简单，请原谅我提出这个问题。我不知道为什么进度条没有显示出来！

我创建了一个JSFiddle，它包含2个Bootstrap进度条的代码。一个通过简单的HTML显示，但我试图在我的项目中创建的是通过构建HTML通过jQuery创建的。在小提琴中，你可以看到只有一个在显示。有人可以帮我理解为什么第二个没有出现？！即使我在提供商的div中创建的HTML也没有出现。

HTML：

public class ClearableErrorTextInputEditText extends ErrorTextInputEditText implements View.OnFocusChangeListener, View.OnTouchListener, TextWatcher {

private Drawable resIcon;
private OnFocusChangeListener childFocusListener;

public ClearableErrorTextInputEditText(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setup();
}

public ClearableErrorTextInputEditText(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

public ClearableErrorTextInputEditText(Context context) {
    super(context);
    setup();
}

@Override
public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_UP) {
        if (getCompoundDrawables()[2] != null) {
            final boolean tappedClose = event.getX() > (getWidth() - getPaddingRight() - resIcon.getIntrinsicWidth());
            if (tappedClose) {
                setText("");
                return false; // true will fail on emulator running 2.1 and physical keyboard / scroll wheel
            }
        }
    }
    return false;
}

@Override
public void setOnFocusChangeListener(OnFocusChangeListener l) {
    childFocusListener = l;
}

@Override
public void onFocusChange(View v, boolean hasFocus) {
    setClearIconVisible(hasFocus && getText().length() > 0);

    if (childFocusListener!=null){
        childFocusListener.onFocusChange(v, hasFocus);
    }
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count){
    super.onTextChanged(s, start, before, count);
    setClearIconVisible(isFocused() && s.length() > 0);
}

@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {} // not interesting

@Override
public void afterTextChanged(Editable s) {} //  // not interesting

private void setup() {
    if(isInEditMode()){
        return;
    }

    resIcon = getResources().getDrawable(R.drawable.ic_clear, null);
    resIcon.setBounds(0, 0, resIcon.getIntrinsicWidth(), resIcon.getIntrinsicHeight());

    setClearIconVisible(false);

    super.setOnTouchListener(this);
    super.setOnFocusChangeListener(this);
    addTextChangedListener(this);
}

private void setClearIconVisible(final boolean visible){
    final Drawable icon = visible ? resIcon : null;
    setCompoundDrawables(getCompoundDrawables()[0],
            getCompoundDrawables()[1], icon, getCompoundDrawables()[3]);
}

使用Javascript：

 <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>

<div class="panel panel-default">
    <table class="table" border=1>
        <tbody>
            <tr>
                <td><strong>Run Id:</strong>

                </td>
                <td>
                    <div id="runuid"></div>
                </td>
            </tr>
            <tr>
                <td><strong>Status:</strong>

                </td>
                <td>
                    <div id="status"></div>
                </td>
            </tr>
            <tr>
                <td><strong>Started:</strong>

                </td>
                <td>
                    <div id="started"></div>
                </td>
            </tr>
            <tr>
                <td><strong>Run by:</strong>

                </td>
                <td>
                    <div id="user"></div>
                </td>
            </tr>
            <tr>
                <td><strong>Provider:</strong>

                </td>
                <td>
                    <div id="providers"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>